Razzle: 启动新应用

创建于 2017-06-05  ·  5评论  ·  资料来源: jaredpalmer/razzle

这个项目看起来很棒。 我将要创建一个新项目,只是想知道 next.js、create-react-app 和 razzle 之间有什么好处,或者什么是最好的长期。 我真的很喜欢 SSR,所以 CRA 可能是不可能的。 我用 next 构建了一个应用程序,然后发现了这个项目。 希望这是一个可以问这个问题的好地方,但只是想对长期最好的方法有所了解。

discussion

最有用的评论

谢谢@knipferrc

类似的经历使我创建了 Razzle。

大约 6 个月前,我在 Next.js 发布后立即使用 Next.js 启动了一个巨大的应用程序,并且流失量太大,我无法处理。 我确实提交了参数化路由示例的 PR(即/user/:id )。 我记得我失去了一整周的工作,因为一些奇怪的错误与在 route changes 上触发 getInitialProps 相关。 归根结底,Next.js 为您做出了许多非常重要的决定(即路由、数据获取、文件夹结构和样式)。 这些是好是坏完全取决于您正在构建的应用程序的类型。 事实证明,我实际上并不需要服务器渲染每条路由(仅像 2 条),我想要客户端加载状态而不是整页重新加载,并且我不想在路由更改之间破坏全局状态树。 再加上我认为 React-Router 4 是自切片面包以来最好的东西,这意味着 Next.js 不适合该项目。

为了寻找更稳定的东西,我转向了 NYT 的 kyt 项目。 这对于大约 2 个月来说已经足够了,但是 1)随着应用程序的增长,构建时间变得异常缓慢(>45 秒),2)kyt 的 SCSS 规则不适合该项目,以及 3)我发现 kyt 的日志记录(使用表情符号的疯狂数量)非常烦人。 所以我决定开始研究一种更薄、更快的 kyt 替代品,但使用通用 HMR 和与 Next.js 类似的配置 API——可以说是create-react-app-ssr

一切都说完了,我意识到我已经创建了一个几乎与框架无关的构建系统,并且这种抽象级别更适合我的项目需求。 通过“与框架无关”,我的意思是 Razzle 将 100% 使用 Angular、Vue、Rax、Preact、Inferno、React-XP、RN-Web、Reason-React 以及_对我来说最重要的_,无论接下来会出现什么疯狂的东西。 恕我直言,适应性是 Razzle 和我见过的几乎所有其他东西之间的关键区别。 使用 Razzle,您可以在博客文章中阅读一些内容,创建一个 fork,添加一个 babel-transform/webpack config/parallel 构建系统,然后尝试一下。 为什么? 因为与 Next 不同,Razzle 不是一个框架,并且与 CRA 不同,Razzle 允许您在不分叉的情况下扩充底层配置。 这对我学习、教学、实验和经商的方式来说意义重大。

Razzle 的灵活性和不可知论已经为我和我的团队带来了回报:

  • 我们通过更改razzle.config.js中的不到 10 行代码,逐步将我们的应用程序从部分流式迁移到 100% TypeScript。
  • 无需尝试,Razzle 已成为引导 ReasonReact 项目(SSR 或 SPA)的最快方式。

至于Razzle的未来。 两天前,“向 CRA 添加 SSR 支持”被提及为 React Core 团队路线图的前 15 项待办事项。 如果将 SSR 支持添加到 CRA,Razzle 可能不再需要存在..._我对此非常满意_。 在此之前,Razzle 将作为一个与框架无关的构建工具,用于服务器渲染的通用 JavaScript。

所有5条评论

我想每个人都会同意正确的答案是这取决于你和你的新项目需要什么。

据我所知,Next.js 是一个完整的框架,可以选择性地用作 ZEIT 生态系统的一部分? 还是平台? 而 Razzle 则更加简约。 所以它不包括你可能不需要的功能,但它也不包括你可能需要或最终可能需要的功能。

我之前也考虑过使用 Next.js,但有一些小细节让我很恼火。 例如 Next.js 没有正确地缩小 HTML 输出(我知道这根本不重要,但这对我来说是一个交易破坏者。)。 它还使用 styled-jsx 和 CSS-in-JS,但我更喜欢Styled Components 。 另外,对于我的新项目,我不需要路由(还 😄)。

最后幸运的是,在测试了一堆示例项目之后,我最终找到并使用了 Razzle。 实际上,我已经开始创建一个名为Razzle Material UI Styled Example的示例项目,其中包括我需要的一些模块和功能。 所以现在我几乎可以无耻地从事我的新项目了。 如果您需要相同的功能或其中一些功能,请随意使用上述存储库。

谢谢@knipferrc

类似的经历使我创建了 Razzle。

大约 6 个月前,我在 Next.js 发布后立即使用 Next.js 启动了一个巨大的应用程序,并且流失量太大,我无法处理。 我确实提交了参数化路由示例的 PR(即/user/:id )。 我记得我失去了一整周的工作,因为一些奇怪的错误与在 route changes 上触发 getInitialProps 相关。 归根结底,Next.js 为您做出了许多非常重要的决定(即路由、数据获取、文件夹结构和样式)。 这些是好是坏完全取决于您正在构建的应用程序的类型。 事实证明,我实际上并不需要服务器渲染每条路由(仅像 2 条),我想要客户端加载状态而不是整页重新加载,并且我不想在路由更改之间破坏全局状态树。 再加上我认为 React-Router 4 是自切片面包以来最好的东西,这意味着 Next.js 不适合该项目。

为了寻找更稳定的东西,我转向了 NYT 的 kyt 项目。 这对于大约 2 个月来说已经足够了,但是 1)随着应用程序的增长,构建时间变得异常缓慢(>45 秒),2)kyt 的 SCSS 规则不适合该项目,以及 3)我发现 kyt 的日志记录(使用表情符号的疯狂数量)非常烦人。 所以我决定开始研究一种更薄、更快的 kyt 替代品,但使用通用 HMR 和与 Next.js 类似的配置 API——可以说是create-react-app-ssr

一切都说完了,我意识到我已经创建了一个几乎与框架无关的构建系统,并且这种抽象级别更适合我的项目需求。 通过“与框架无关”,我的意思是 Razzle 将 100% 使用 Angular、Vue、Rax、Preact、Inferno、React-XP、RN-Web、Reason-React 以及_对我来说最重要的_,无论接下来会出现什么疯狂的东西。 恕我直言,适应性是 Razzle 和我见过的几乎所有其他东西之间的关键区别。 使用 Razzle,您可以在博客文章中阅读一些内容,创建一个 fork,添加一个 babel-transform/webpack config/parallel 构建系统,然后尝试一下。 为什么? 因为与 Next 不同,Razzle 不是一个框架,并且与 CRA 不同,Razzle 允许您在不分叉的情况下扩充底层配置。 这对我学习、教学、实验和经商的方式来说意义重大。

Razzle 的灵活性和不可知论已经为我和我的团队带来了回报:

  • 我们通过更改razzle.config.js中的不到 10 行代码,逐步将我们的应用程序从部分流式迁移到 100% TypeScript。
  • 无需尝试,Razzle 已成为引导 ReasonReact 项目(SSR 或 SPA)的最快方式。

至于Razzle的未来。 两天前,“向 CRA 添加 SSR 支持”被提及为 React Core 团队路线图的前 15 项待办事项。 如果将 SSR 支持添加到 CRA,Razzle 可能不再需要存在..._我对此非常满意_。 在此之前,Razzle 将作为一个与框架无关的构建工具,用于服务器渲染的通用 JavaScript。

哇!! 非常感谢你们的精彩回复。

嗨 Jared,我不太清楚如何使用 Razzle 将 SPA Angular 项目转换为 SSR。
你能给我一个提示或指导如何做到这一点吗? 太感谢了。

+1 用于 Razzle Angular 解决方案。 https://github.com/jaredpalmer/razzle/issues/1109

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

piersolenski picture piersolenski  ·  4评论

krazyjakee picture krazyjakee  ·  3评论

ewolfe picture ewolfe  ·  4评论

alexjoyner picture alexjoyner  ·  3评论

corydeppen picture corydeppen  ·  3评论