V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ericgui
V2EX  ›  程序员

用 nextjs 做 Reactjs SSR 的一些问题

  •  
  •   ericgui · 2019-10-07 03:42:10 +08:00 · 1526 次点击
    这是一个创建于 1635 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    最近沉迷 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,反正还有点搞不清

    我会继续补充

    第 1 条附言  ·  2019-10-07 09:24:58 +08:00
    关于 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 条附言  ·  2019-10-09 10:18:28 +08:00
    还有 2 个:

    1、 不能用 webpack 设置 alias,需要用 babel
    2. next.config.js 有一个老 bug,需要用一个 hack 才能搞定, https://github.com/zeit/next-plugins/issues/392
    刚修好,几个小时前刚修好
    第 3 条附言  ·  2019-10-14 07:30:40 +08:00
    项目地址,有做 nextjs 的兄弟交流一下:

    https://github.com/buzzycloud/buzzyblog
    21 条回复    2019-10-14 11:26:04 +08:00
    skenan
        1
    skenan  
       2019-10-07 04:11:34 +08:00
    nextjs 配合 now.sh 还是很好用的
    ericgui
        2
    ericgui  
    OP
       2019-10-07 04:14:50 +08:00
    @skenan 这里的风险就是 vendor lock-in,而且我还是希望能够面向 AWS 编程,或者面向阿里云。所以折腾得久了一点。

    此外,我这个系统里,不仅仅有 nextjs,还有一些 php 的东西,并不是纯粹的 nextjs
    skenan
        3
    skenan  
       2019-10-07 04:17:47 +08:00
    @ericgui 嗯,如果单纯测试的话,now.js + github 让 PR 可视化,我们 nextjs 项目也是用 docker 在阿里云上部署的
    shadowwalker2644
        4
    shadowwalker2644  
       2019-10-07 04:35:14 +08:00 via Android   ❤️ 1
    Vendor lock in 很难避免,这也是云服务商设计的商业策略。router 的话你可以看一下 after.js ,但也是前端。SEO 什么的需要后端 route 配合才行,我觉得只要关键几个 URL 就行了
    ericgui
        5
    ericgui  
    OP
       2019-10-07 05:44:16 +08:00
    @shadowwalker2644 我刚才看了一下,原来 after.js 的作者就是 razzle 的作者啊,所以我就很轻易的排除了这个选项,我当初选择用什么做 ssr 的时候,也是挣扎了好一阵子。

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

    我在写一个解决方案,所以不是在尝试新技术,而是用最成熟的技术去解决一个存在已久的问题。
    shadowwalker2644
        6
    shadowwalker2644  
       2019-10-07 05:51:05 +08:00 via Android
    我也是坚持用 nextjs,可以加 vx(用户名)交流一下。
    maomaomao001
        7
    maomaomao001  
       2019-10-07 10:56:30 +08:00 via Android
    现在 next9 已经相当好用了,next8 的时候,问题多的要死,
    路由的话,你多看几遍文档,也学会了,比起 react router,转换一点思路的事情,而且还相当简单
    ericgui
        8
    ericgui  
    OP
       2019-10-07 11:14:50 +08:00 via Android
    @maomaomao001 不止一个人这么说:)
    duan602728596
        9
    duan602728596  
       2019-10-07 11:37:06 +08:00 via iPhone
    spa404 是你的配置问题,单页应用需要把请求都重定向到 index.html。SSR 的话,我是直接在多加一套 webpack 配置就 ok 了。
    alexmy
        10
    alexmy  
       2019-10-07 11:52:38 +08:00
    好久都没用过 next.js 了,现在都用阿里的那个 beidou,底层的服务端是 egg.js ,有超级多的 egg 插件可以使用,简单的站点连逻辑都写在上面了。
    ericgui
        11
    ericgui  
    OP
       2019-10-07 13:34:50 +08:00
    @duan602728596 myblog.com/hello-world.html 就算你重定位到 index.html 又有什么意义?我当然知道怎么做 catch all route,但这没意义
    ericgui
        12
    ericgui  
    OP
       2019-10-07 13:36:26 +08:00
    @alexmy 谢谢,我研究一下 beidou
    ke1vin
        13
    ke1vin  
       2019-10-08 09:29:20 +08:00
    总感觉 nextjs 的 webpack 配置方式不够自由和透明,这是我最不适应的地方
    KuroNekoFan
        14
    KuroNekoFan  
       2019-10-08 14:46:44 +08:00
    nextjs 整合 webpack 的方式过于黑箱,不容易做二次开发
    benjunk
        15
    benjunk  
       2019-10-08 14:49:47 +08:00
    nextjs 一直有个问题,,,没法加 baseurl,几个 issue 都提到过,最后搞得我自己拉源码改
    ericgui
        16
    ericgui  
    OP
       2019-10-09 00:30:21 +08:00
    @KuroNekoFan 估计是故意的
    ericgui
        17
    ericgui  
    OP
       2019-10-09 00:30:31 +08:00
    @benjunk 牛逼
    ericgui
        18
    ericgui  
    OP
       2019-10-10 05:12:39 +08:00
    @benjunk 改完了之后咋办,是提 pr ? 还是自己用一个私有版本?
    benjunk
        19
    benjunk  
       2019-10-10 10:19:40 +08:00
    @ericgui pr 没希望的,你可以搜索 issue 里面,有个讨论 baseurl 的都好长了,,,后来没维护下去,next 更新太快了,维护自己这个小功能就要放弃 next 新东西,,哎
    maomaomao001
        20
    maomaomao001  
       2019-10-14 11:21:33 +08:00
    _app.js 里明显是可以用的估计你用的不太对

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


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

    }


    ```
    ericgui
        21
    ericgui  
    OP
       2019-10-14 11:26:04 +08:00
    @maomaomao001 可能确实有问题,我总会有 warning,说不应该在_app.js 里用 getInitialProps

    非常奇怪,所以才挪到 index.js 里了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2882 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 13:05 · PVG 21:05 · LAX 06:05 · JFK 09:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.