3个山西建网站的坑，选错技术栈网站就白搭

网站做好了没人访问，山西很多老板建站后才发现，不是技术问题，是选错怎么选了。去年帮山西一家汽配公司做官网，投入了20多万，上线后3个月访问量不到500，根本没人看。问题出在建站流程没搞清楚，选的技术栈和SEO完全脱节。

项目背景与需求

山西一家中型汽配公司，主要客户是全国经销商和海外客户。他们找我做官网时的需求是：要一个能展示产品、支持多语言、能做外贸询盘的网站，还要能做SEO优化。老板觉得网站做起来就等于客户来了，结果上线后才发现，没人访问，更没人转化。

他们最初的诉求是“山西建网站，怎么选技术栈”，但并没有意识到网站的流量和内容、SEO优化、服务器配置、SSL证书等多个环节密切相关。建站不能只盯着前端美观，后端架构、SEO布局、服务器性能缺一不可。

项目核心需求拆解

展示产品信息：需要商品分类、产品详情页、图文展示、PDF下载等功能。
多语言支持：网站需支持中英文，满足国内经销商和海外客户的浏览。
外贸询盘系统：要有在线留言、询盘表单、邮件自动回复、CRM系统对接等功能。
SEO优化：网站要能被百度、谷歌收录，关键词排名要靠前。
服务器稳定与安全：网站部署要稳定，能抗住流量高峰，支持SSL证书和ICP备案。

技术选型：怎么选才不会翻车

建站的第一步是选技术栈，选错了，后面再补救就太费钱了。山西建网站，怎么选技术栈？不能只看价格，得看功能、扩展性、SEO支持、开发成本。

前端框架：React + Next.js

我们采用了React + Next.js作为前端框架。Next.js支持SSG（静态生成）和SSR（服务端渲染），能兼顾SEO和性能。MDN Web Docs中也提到，SSG对搜索引擎的抓取更友好，尤其适合需要做SEO的外贸站。

优势：

支持静态生成，SEO友好
支持服务端渲染，提升首屏加载速度
支持多语言内容管理
支持API接口，方便和后端对接

后端架构：Node.js + Express

后端我们选择了Node.js + Express，轻量级、性能高、开发效率高，特别适合中小型网站。Node.js的异步非阻塞特性，能支撑高并发访问，尤其适合外贸站点。

优势：

支持多语言内容管理
与前端框架无缝对接
轻量级，适合快速部署
良好的社区支持和文档资源

数据库：MongoDB + MySQL

我们采用了MongoDB + MySQL的混合架构。MongoDB用来存储产品信息、用户数据，支持灵活的Schema设计；MySQL用来存储用户登录、订单、询盘等结构化数据。

优势：

MongoDB支持动态数据结构，适合产品信息管理
MySQL稳定性强，适合用户系统管理
混合架构兼顾灵活性与稳定性

内容管理系统：Strapi + Next.js API路由

为了满足客户对内容管理的需求，我们选用了Strapi作为内容管理平台，和Next.js API路由对接。这样，客户可以自行管理文章、产品信息、多语言内容，无需依赖专业程序员。

优势：

管理界面友好，客户可自主更新内容
支持多语言内容管理
与Next.js无缝对接，无需额外接口开发
部署简单，维护成本低

域名与服务器：阿里云 + Cloudflare

域名选用了阿里云，速度快，备案流程清晰，支持ICP备案。服务器我们部署在阿里云ECS，性能稳定，支持自动扩容。为了提升网站速度，前端加了Cloudflare CDN。

优势：

阿里云备案流程清晰，符合国内政策
阿里云服务器稳定，适合外贸访问
Cloudflare提升网站加载速度，降低访问延迟

核心实现：代码片段与配置示例

1. Next.js多语言配置

// pages/_app.jsimport { useRouter } from 'next/router';function MyApp({ Component, pageProps }) {const { locales, asPath } = useRouter();const currentLocale = locales[0];return (<div><Component {...pageProps} /></div>);
}export default MyApp;

// pages/[locale]/index.jsexport async function getStaticProps({ params }) {const { locale } = params;return {props: {locale,},};
}

2. Strapi接口调用示例

// pages/api/products.jsexport default async function handler(req, res) {const { locale } = req.query;const response = await fetch(`https://api.strapi.com/api/products?locale=${locale}`);const data = await response.json();res.status(200).json(data);
}