用 nextjs 做 Reactjs SSR 的一些问题

[ericgui]

[可能有错误，请大家轻拍]

最近沉迷 SSR，因为考虑到了一些需求：

• SEO
• Social sharing

当然了，谷歌牛逼，都能直接解析 SPA 了，但问题我主要还是一个用户体验上：用户点击一个 url，SPA 就 404 了，但一个体验很好的网站，显然希望是能够加载出来的。

所以就开始了迁移，从 React SPA 迁移到 nextjs

nextjs 很多大坑，比如说，

• getInitialProps 只能在pages这个目录下用
  • _app.js 里不建议用 getInitialProps
• 关于 router：
  • Link 其实是客户端 routing，
  • router ( useRouter 和 withRouter ）的话， push就是服务端 routing，
  • router 不能像 react-router 那样带state （我看某个 issue 这么些的，想和各位确认一下）
• PM2 部署
  • 还是需要用express做一个中间层
  • 也有用koa2做中间层的，但我没再折腾了
  • 如果不用，直接pm2 start next start也行，但我还是希望用到ecosystem.config.js这个文件写配置
• 一些迷
  • 反正就是总会出现一些迷一样的 error，反正还有点搞不清

我会继续补充

[skenan]

nextjs 配合 now.sh 还是很好用的

[ericgui]

@skenan 这里的风险就是 vendor lock-in，而且我还是希望能够面向 AWS 编程，或者面向阿里云。所以折腾得久了一点。

此外，我这个系统里，不仅仅有 nextjs，还有一些 php 的东西，并不是纯粹的 nextjs

[skenan]

@ericgui 嗯，如果单纯测试的话，now.js + github 让 PR 可视化，我们 nextjs 项目也是用 docker 在阿里云上部署的

[shadowwalker2644]

Vendor lock in 很难避免，这也是云服务商设计的商业策略。router 的话你可以看一下 after.js ，但也是前端。SEO 什么的需要后端 route 配合才行，我觉得只要关键几个 URL 就行了

[ericgui]

@shadowwalker2644 我刚才看了一下，原来 after.js 的作者就是 razzle 的作者啊，所以我就很轻易的排除了这个选项，我当初选择用什么做 ssr 的时候，也是挣扎了好一阵子。

nextjs 显然有很多问题，但这是最流行的，遇到问题可以 google 出来，文档虽然简陋，但该有的也都有。而其他的方案，比如这个 afterjs，就一个 readme，而且是一个个人开发者维护，就算他再牛逼，我也不敢用。我用 razzle 也写了一些，后来直接废弃，感觉还是 nextjs 还是更成熟一些。

我在写一个解决方案，所以不是在尝试新技术，而是用最成熟的技术去解决一个存在已久的问题。

[shadowwalker2644]

我也是坚持用 nextjs，可以加 vx(用户名)交流一下。

[maomaomao001]

现在 next9 已经相当好用了，next8 的时候，问题多的要死，
路由的话，你多看几遍文档，也学会了，比起 react router，转换一点思路的事情，而且还相当简单

[ericgui]

@maomaomao001 不止一个人这么说:)

[duan602728596]

spa404 是你的配置问题，单页应用需要把请求都重定向到 index.html。SSR 的话，我是直接在多加一套 webpack 配置就 ok 了。

[alexmy]

好久都没用过 next.js 了，现在都用阿里的那个 beidou，底层的服务端是 egg.js ，有超级多的 egg 插件可以使用，简单的站点连逻辑都写在上面了。

[ericgui]

@duan602728596 myblog.com/hello-world.html 就算你重定位到 index.html 又有什么意义？我当然知道怎么做 catch all route，但这没意义

[ericgui]

@alexmy 谢谢，我研究一下 beidou

[ke1vin]

总感觉 nextjs 的 webpack 配置方式不够自由和透明，这是我最不适应的地方

[KuroNekoFan]

nextjs 整合 webpack 的方式过于黑箱，不容易做二次开发

[benjunk]

nextjs 一直有个问题，，，没法加 baseurl，几个 issue 都提到过，最后搞得我自己拉源码改

[ericgui]

@KuroNekoFan 估计是故意的

[ericgui]

@benjunk 牛逼

[ericgui]

@benjunk 改完了之后咋办，是提 pr ？ 还是自己用一个私有版本？

[benjunk]

@ericgui pr 没希望的，你可以搜索 issue 里面，有个讨论 baseurl 的都好长了，，，后来没维护下去，next 更新太快了，维护自己这个小功能就要放弃 next 新东西，，哎

[maomaomao001]

_app.js 里明显是可以用的估计你用的不太对

```
static async getInitialProps({ Component, ctx }) {
//初始化
//统一跳转之类的


// 不要忘记这一行就可以了
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps({ ...ctx });
}

}


```