ssr是react技术栈绕不开的一环，应该说是spa应用绕不开的一环，为了弥补spa的一些缺陷，具体优缺点这里就不做概述了，大部分场景最主要还是两点：提高首屏加载速度 和方便SEO。网上的对比非常多。但是奇怪的是，往后是哪个很少有对已有的react改成ssr的文章或者经验，要么就是太老，要么就是写到一半，所以笔者打算自己也去试一下，这里笔者分为两个部分去写，一个是用nextjs去实现，一个是自己去搭建node去实现。 不管何种方式，第一步都是用cra搭建自己的react项目。

next

next自己提供了一套cli脚手架，可以直接搭建出react ssr项目，但是 这里说来简单，引入框架，有手就行，本来笔者也是这么想的，但是真正实践起来还是会有坑的。 nextjs其实和umi有点像，都是约定式的路由，包括一些文件夹的名称和配置，当然，如果想更改的话，可以在项目根目录下配置一个next.config.js，做一些配置，具体的配置项可以看这里，里面也包括自己配置webpack，已经自定义路由。

改造项目结构

开始动手，首先当然是装一个next了，然后就是把start命令和build命令改成next的，像这样：

"scripts": {
  "start": "next start",
  "dev": "next dev",
  "build": "next build",
}

这样之后，项目中的大部分文件其实都没有用了，比如config下的webpack配置，以及入口文件index.js和app.js（如果你不做其他配置的话）。 这时候就可以开始调试了，注意：需要调试的话，需要先build，再start，这时候就会碰到第一个问题，build不成功，具体截图这里漏了，但是原因是node-sass版本过高，这里需要把依赖的node-sass版本写成7.0.0以下的，最好是6.0.1，这时候再build，还是会报错，注意下，要先把刚才错误的一次build产生的.next删除了再重新build，成功（如果你的项目中没有其他错误的话）

引入sass

接上面的，大部分的迁移项目其实到上面那一步根本不会成功，因为项目中很可能用了sass，如下

这时候build的时候会报错，提示你不能使用全局css，如果需要，要在_app.js文件中加（后面讲），这时候需要把这个index.scss重命名成index.module.scss（这么一改突然就变成了postCss），引入的地方也要用postcss的方式使用，离谱。当然也有其他方式，更改next.config.js的webpack配置，这里我还没去尝试，后续尝试了可以补上。

引入redux

经过上面之后，部分项目还是会build失败，看看原因，是因为store拿不到，useSelect会报错，很明显，这是因为引用了redux未配置产生的错误。我们需要在pages目录下新建一个_app.js，这个作用就相当于是之前的入口文件了（当然如果不新建也可以的，next会为你自动匹配，但是就用不了provider了），接下来写一个渲染函数如下：

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

这就类似之前的app.js里面的写法了。

引入router

经过上面几个步骤，大部分的项目都能build完成了，接下来start，问题就会接踵而来。 怎么跳转，之前的项目肯定是使用react-router去完成，到了next，就不一样了。 官方建议第一步先删除react-router-dom的依赖和引用，笔者没去做，好像影响不大，笔者这边直接把之前的react-router的使用都换成了next/router，就差不多行了，当然next/router可能还有些功能没有实现，至于react-router-dom，大部分使用场景都是作为一个路由表的配置，而next这里用的是约定式路由，包括嵌套路由都不需要配置，具体的一些说明和操作在这里。 ​ 好了，经过上面几步，基本上大部分的react项目就能迁移完成了，说起来有挺多坑，但是意外的不复杂，毕竟少了一个后端服务器的工作量，确实不难。

搭建node服务器

好了，结束next，接下来试试自己搭一个，你也许会想，会不会特别复杂，要去实现router，redux的一些转换，确实，笔者在写之前也会考虑一下这种难度。