19年做网站踩坑实录：从丑模板到完整流程

别再说模板网站太丑了，那是你没选对路子。我干这行十九年，见过太多设计师拿着淘宝99块的模板，硬套在严肃企业站里，结果上线第一天就被老板骂“没档次”。这不只是审美问题，是底层架构没跟上。今天不讲虚的，直接复盘一个真实项目，把从需求到上线的完整流程拆开揉碎，给你看个明白。

项目背景与需求：设计师的痛点与技术债

去年Q3，我接了一个制造业客户的官网改版。客户方是位资深产品设计师，审美在线，但技术背景薄弱。她最初的诉求很明确：要一个像Apple官网那样流畅、极简的视觉体验，最好能直接拖拽生成页面。

起初，她试了Wix和国内的几套主流SaaS建站平台。结果呢？页面加载慢得让人想砸电脑，自定义CSS被平台限制得死死的，稍微改个字体间距就得在设置里翻半天。更致命的是，SEO结构一塌糊涂，H标签层级混乱，图片没有Alt属性，移动端适配更是灾难。

她找到我时，原话是：“我要的不是一个网页，是一个能呼吸的数字产品。”这句话点中了核心：模板网站太丑不够用，根本原因是它们牺牲了性能换取了易用性，牺牲了SEO换取了美观。

我们的需求清单很快列出来：

极致性能：首屏加载时间控制在1.5秒内，Lighthouse评分全绿。
设计自由：完全支持复杂动画和自定义布局，不被组件库绑架。
SEO友好：静态化输出，结构清晰，利于搜索引擎抓取。
内容管理：设计师或运营人员能独立更新新闻和产品页，不需要动代码。

这时候，传统的WordPress+主题方案就被pass了。虽然WP生态强大，但为了追求极致的性能和设计自由度，我们需要更底层的控制权。

技术选型：为什么是Next.js + Headless CMS

在十九年的经验里，我见过从JSP到PHP，从jQuery到Vue，技术栈换了一轮又一轮。但对于“高设计自由度+高性能+SEO”这个组合拳，目前最稳的方案是 SSR（服务端渲染）框架 + 无头CMS。

我选了 Next.js 作为前端框架，Strapi 作为无头CMS。

为什么是Next.js？

SSR支持：对SEO至关重要。爬虫拿到的是完整的HTML，而不是一个空白的JS壳子。
文件路由：对于设计师来说，文件结构即页面结构，直观易懂。
性能优化内置：图片自动优化、代码分割、字体加载优化，这些坑它都帮你填好了。

为什么是Strapi？

开源免费：省下一笔License费用。
API-first：前端只管渲染，后端只管数据，彻底解耦。设计师可以在后台像填Excel一样管理内容，不用碰前端代码。
插件丰富：图片管理、媒体库功能完善，适合大量视觉素材的管理。

这套组合拳，就是我常说的“完整流程”里的技术底座。它不是最省事的，但是最能平衡“设计师梦想”和“工程师现实”的方案。

核心实现：代码里的魔鬼细节

很多设计师转前端，最容易卡在“怎么把Figma里的设计变成代码”这一步。这里我不讲基础语法，只讲这个项目中真正影响体验和排期的几个关键点。

1. 图片优化：不是懒加载那么简单

设计师喜欢用大图，这没错，但大图是性能杀手。Next.js自带的<Image>组件是关键。

import Image from 'next/image';export default function HeroSection() {return (<section className="hero"><Imagesrc="/images/hero-bg.webp"alt="工厂全景高清图"width={1920}height={1080}priority // 首屏图片优先加载layout="responsive"className="hero-image"/><div className="hero-content"><h1>智造未来</h1><p>重新定义工业标准</p></div></section>);
}

注意这里的priority属性。对于首屏的关键视觉元素，必须标记为优先加载。Next.js会自动将图片转换为WebP格式，并生成多尺寸srcset，根据用户设备加载最合适的图。这一步，能让移动端流量下的跳出率降低30%以上。

2. 动态数据获取：API的优雅调用

页面内容从Strapi获取。在Next.js中，我们使用getStaticProps在构建时生成静态页面。

export async function getStaticProps() {const res = await fetch(`${process.env.STRAPI_URL}/api/products?populate=deep`);const products = await res.json();return {props: {products: products.data.map((product) => ({id: product.id,name: product.attributes.name,description: product.attributes.description,image: product.attributes.image.url,})),},revalidate: 3600, // 每小时重新生成一次页面};
}

这里的revalidate: 3600是增量静态再生（ISR）的核心。意味着页面在构建时生成静态HTML，当用户访问时，如果页面数据在1小时内没变，直接返回缓存；如果变了，后台异步重新生成。用户看到的永远是最新内容，且速度极快。

3. 响应式布局：断点不是像素

设计师习惯给固定宽度，但Web是流动的。我们用Tailwind CSS的响应式类，而不是媒体查询堆砌。

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">{products.map((product) => (<div key={product.id} className="bg-white shadow-lg rounded-lg overflow-hidden"><img src={product.image} alt={product.name} /><div className="p-4"><h2 className="text-xl font-bold">{product.name}</h2><p className="text-gray-600">{product.description}</p></div></div>))}
</div>

这种写法，设计师一眼就能看懂：手机一列，平板两列，电脑三列。沟通成本大幅降低。