用 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，反正还有点搞不清

我会继续补充

关于 SSR 对 SEO 的益处的补充：

Better SEO, as the search engine crawlers will directly see the fully rendered page.

Note that as of now, Google and Bing can index synchronous JavaScript applications just fine. Synchronous being the key word there. If your app starts with a loading spinner, then fetches content via Ajax, the crawler will not wait for you to finish. This means if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary.

还有 2 个：

1、 不能用 webpack 设置 alias，需要用 babel
2. next.config.js 有一个老 bug，需要用一个 hack 才能搞定, https://github.com/zeit/next-plugins/issues/392
刚修好，几个小时前刚修好

项目地址，有做 nextjs 的兄弟交流一下：

https://github.com/buzzycloud/buzzyblog

[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 });
}

}


```

[ericgui]

@maomaomao001 可能确实有问题，我总会有 warning，说不应该在_app.js 里用 getInitialProps

非常奇怪，所以才挪到 index.js 里了