在这里,我想给你一个新的React项目入门的简要概述。我想反思一下优点和缺点,反思一下作为一个开发者所需要的技术水平,反思一下作为一个React开发者,每个启动项目都能为你提供哪些功能。最后,你将了解到针对不同需求的3种解决方案。

免责声明:从个人开发者的角度来看,我完全支持React团队在其新文档中推动的框架/SSR议程。然而,我觉得最近的公告使React初学者和想采用React的公司处于不利地位。因此,我想在这里给他们提供更多不同的选择,作为逃生通道。

使用Vite

Vite是create-react-app(CRA)的明确继承者,因为他们俩没有太大的区别。与create-react-app(CRA)(使用Webpack)相比,它的速度要快得多,因为它在后台使用了esbuild

与create-react-app(CRA)相同,Vite仍然倾向于创建单页应用程序(SPA),其客户端路由/渲染功能优于SSR。然而,由于SSR如今正成为一个更重要的话题,因此它在Vite中作为了可选功能。

当项目来自CRA时,直接迁移到Vite是很容易的。像TypeScript、ESLint、SVG和SSR这样的可选功能只需在Vite的vite.config.js文件中进行一些配置,除此之外还可以在一些特定功能文件中进行配置(如tsconfig)。

Vite允许开发者在没有主见的框架下使用React。开发者可以选择互补的React库进行路由、数据获取、状态管理和测试。与所有的React框架相比,它不会强迫你使用任何特定的React功能、库或配置(在项目层面)。

最后,Vite鼓励初学者学习React和它的基本原理,而不被框架所分心。当Vite成为副驾驶时,初学者可以完全专注于React和它的核心功能。相比之下,在框架环境中学习React时,React几乎成了副驾驶,而不得不遵循框架的意见(比如基于文件的路由)。

使用Vite的优点

  • 几乎可以直接替代CRA

  • 依然对SPA/CSR友好,但SSR是可选的

  • 没有框架/公司的捆绑

  • 轻量级

  • 在功能层面上不与React混为一谈

    • 因此专注于React本身,而不是一个框架
  • 了解React基本原理的学习曲线比较平缓

使用Vite的缺点

  • 优先考虑SPA/CSR

  • 没有框架支持

  • 无法使用React为集成框架提供的架构功能

    • 例如,React服务端组件(RSC)

为什么可能不是React文档中的默认值

  • 使用SPA/CSR而不是SSR

  • 技术捆绑使开发者无法使用所有React功能

    • 例如,React服务端组件(RSC)
  • 不利于实现以下愿景

    • 拥有一个React框架

    • 启用不同的渲染技术

    • 启用所有可用的React功能

      • 例如,React服务端组件(RSC)
  • 框架无关(这里指React)

    • React不是Vite的重点
    • Vue的缔造者尤雨溪的观点

使用Next

Next.js作为一个框架是非常成熟的,因此当React开发者想在一个有主见的框架环境中使用React时,它是一个明智的选择。它包含了许多特性(例如基于文件的路由)。如果Next.js不是你的菜,可以看看最近发布的Remix框架,它与Next.js的不同之处在于它专注于web标准。

Next.js优先考虑将服务端渲染(SSR)作为渲染技术。然而,它也可以用于静态网站生成(SSG)和客户端渲染(CSR)。在此基础上,还有一些更前沿的渲染技术,如增量式网站渲染(ISR)和React服务端组件(RSC)。是什么让这一切变得更加令人震惊:你可以在Next.js应用程序中混合和匹配渲染技术。虽然营销页面可以使用SSG,但登录/注册背后的实际使用的SSR。

不过,这么大量的新技术也是有代价的:不同的渲染技术会产生工程开销,框架会不断地研究新的渲染技术,因此最终会改变其优先级,而且不是所有的程序员都能跟上步伐。尽管Next.js在过去没有引入破坏性变化方面做得很好,但在将JavaScript/React渲染技术引入后端这个前沿领域工作时,总会有新的标准/配置。

总的来说,虽然Next.js包含了许多特性(例如基于文件的路由),但它也有责任。虽然React本身(比如使用Vite)保持相对稳定,但你肯定会看到Next.js生态系统的变化,因为他们正带头将React带到服务器上。

Next的优点

  • 带有内置库的框架

  • SSR和许多其他渲染技术

    • 性能提升(注意:如果处理正确的话)
    • 与CSR相比,SEO得到改善
  • Vercel是拥有大量资金的大公司

    • 与React核心团队紧密合作
    • 有许多React核心团队的成员被雇佣
  • 在前沿领域耕耘

Next的缺点

  • 在前沿领域耕耘

  • 与使用Vite的React相比,开销/稳定性/可维护性较差

  • 与使用Vite的React相比,学习曲线更陡峭

    • 更多关注框架的细节,更少关注React本身
  • 框架(和基础设施,例如在Vercel上部署)捆绑

为什么可能是React文档中的默认值

  • 最成熟的框架,符合React的框架议程

  • SSR是一等公民,符合React的SSR议程

  • 使用React的所有原始值

    • 例如,React服务端组件(RSC)
  • 不优先考虑"过时的"SPA/CSR

  • 与React及其核心团队关系密切

  • 与React的核心团队合作,在Next中实现新的功能

    • 并最终被Meta/Facebook使用

使用Astro

Astro允许开发人员创建以内容为重点的网站。由于它的群岛架构以及选择性混合,它默认给每个网站提供高效的性能。因此,SEO相关的网站从使用Astro中获益。

从实现的角度来看,它倾向于多页面应用程序(MPA)的概念,而不是单页面应用程序(SPA)。因此,它结束了历史循环:从MPA是网站的主要类型(2010年之前)到SPA被取代(2010-2020年),再次回到MPA(从而使MPA首先成为一个术语)。

Astro是一个与框架(这里是指React)无关的解决方案。因此,你可以使用Astro的内置组件语法或你选择的框架(如React)。虽然框架只是用于服务端的渲染,并没有暴露给客户端。只有当一个人决定将一个交互式群岛混合到客户端时,它才会获取所有必要的JavaScript代码到浏览器上。

对于以内容为重点的网站,Astro被视为Gatsby的竞争对手。在过去的几年里,Gatsby失去了与Next的直接竞争。在这场竞争中,人们可能过多地关注与Next的功能对等(如SSR),因此对以内容为重点的网站真正重要的DX和性能的关注较少。这给了Astro一个机会,来作为可行的替代方案介入。

总之,尽管Next(有SSR/SSG/ISR)或Gatsby也适合以内容为重点的网站。不过Astro作为新的竞争对手,似乎符合以内容为重点的网站更具体的要求(比如性能、专注于内容制作)。

相比之下,Next混合了渲染技术。因此,一个性能优化的营销页面可以在应用程序中实现,而实际的应用程序则隐藏在登录后。但根据Astro的基准,它的性能仍然较差(不考虑RSC,因为还不稳定),因此我宁愿在现代Monorepo设置中混合使用Next和Astro,以使应用程序和网站并存。

使用Astro的优点

  • 以内容为重点的网站
  • 性能
  • SEO
  • 框架无关(比如React)

使用Astro的缺点

  • 不为动态web应用程序做广告

为什么可能不是React文档中的默认值

  • 框架无关

    • React不是Astro的重点
  • 与React的新功能不一致

    • 例如,React服务器组件

      • 使用群岛架构,而不是选择性混合
  • 每次点击链接都要重新加载整个页面

    • 因此不是最好的导航用户体验
    • 这些问题最终会在RSC的Next中得到更好的解决
  • 相反,Gatsby被列入了推荐启动程序的名单中

    • 一流的React解决方案
    • 在架构层面上与React的功能相整合
    • 与React核心团队有更紧密的联系

更多选择

用React以外的其他库启动SSR项目的选择:

  • SvelteKit
  • SolidStart
  • QwikCity

如何开启React项目

  • 如果你开始学习React(从教育者的角度),我建议使用Vite,因为它尽可能地接近React的基本原理。如果你只想找一个轻量级的SPA/CSR解决方案,也是如此。

  • 如果你想在React的基础上寻找一个有主见的框架,并包含几种渲染技术(和基础设施),我会推荐使用Next,因为它是最成熟的解决方案,有所有的优点和缺点。

    • 如果Next.js不符合你的需求,但你仍然在寻找一个包含所有特性的SSR框架,请使用Remix。
  • 如果你想拥有一个以内容为重点的网站,请查看使用Astro小节。

免责声明:在2023年写这篇博文与2024年写这篇博文可能完全不同,届时Next的App Router和RSC会变得稳定,从而成为创建服务端React应用程序的现状。在我个人看来,这是一个转折点,它可能会推动Next成为所有之前列出的案例的一体化解决方案。

最终想法

虽然许多教育工作者可能会赞同为React初学者提供一个更容易的起点(直到RSC/Next有更多的稳定性和更精简/整合的学习经验),但React文档中新的"开始一个新的React项目 "部分反而使很多React初学者处于一个两难的境地。

  • 发生了什么:过去咨询React的初学者被指向旧的文档;但被告知使用带钩子的函数组件。
  • 可能会发生什么:咨询React的初学者被指向新的文档;但会被告知使用Vite而不是Next。

总之,我为React团队提供新的文档感到高兴。然而,它伴随着许多讨论,特别是围绕React启动项目的选择。

尽管每个人都隐约知道SSR和框架正在成为现代React的高优先级,但对于许多人来说,没有看到Vite是从头开始创建一个React项目的最简单的方法,仍然是一个惊喜(至少在2023年)。在2024年可能会有不同的情况,届时所有的基本要素(为初学者提供的React/Next交互式教程、Next13/RSX的稳定性、对RSC优先应用的关注)都会存在,但现在"如何创建一个新的React应用"的转变,以及新的文档似乎都很仓促。

从一个单独的开发者的角度来看,我很期待这次服务端的冒险会带给我们什么。然而,我觉得现在初学者开始学习React,就像他们在React Hooks发布时一样,因此这篇博文是为了提供更多样化的选择来开启一个新的React项目。

如何在2023年开启React项目的更多相关文章

  1. 如何在2023年学习React

    在2023年学习React并不是一件容易的事情.自2019年React Hooks发布以来,我们已经拥有了很多稳定性,但现在形势正在再次变化.而这次变化可能比使用React Hooks时更加不稳定.在 ...

  2. 如何在React项目中直接使用WebAssembly

    前言 自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子.即使有,我自己按照介绍的步骤一步一步来, 也会报各种错误,官 ...

  3. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  4. react-create-app 构建react项目的流程以及需要注意的地方

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...

  5. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

  6. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  7. 前端新手如何安装webstorm ,初步搭建react项目

    下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了.(存微信收藏..) 1:在webstorm下配置node环境: 2:完成之后: React官方脚手架地址: https ...

  8. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  9. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  10. 部署web前端的react项目到linux服务器

    部署web前端的react项目到linux服务器 项目的目录结构 ``` ├─dlls #dlls编译后的问题 ├─doc #帮助文件入口 │ ├─src │ ├─apps #各个功能模块放在这里 │ ...

随机推荐

  1. vue-i18n警告

    vue3引入vue-i18n警告: bundler build of vue-i18n. It is recommended to configure your bundler to explicit ...

  2. IDA 逆 WDF 驱动时的函数识别插件

    快一年没更新了,累,工作累,各种累,想换个工作,突然发现找不到合适的工作了,哎,自己往火坑里跳,怪不得别人. import idautils import idaapi import idc prin ...

  3. 逍遥自在学C语言 | 变量、常量与数据类型

    前言 一.人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 -- 自在. 第二位上场的是和我们一起学习的小白程序猿 -- 逍遥. 二.基本数据类型 1.整型 C语言中的整型数据如下表所示: ...

  4. jmeter参数化导致反斜杠(\)被转义

    前情提要:在用jmeter做接口测试时,对请求体进行参数化,执行结果报错.但在不参数化的情况下,执行结果成功,而且参数化后,请求中读取到的参数是正确的(执行失败与执行成功时的参数一致). 问题排查:参 ...

  5. 迁移学习(COAL)《Generalized Domain Adaptation with Covariate and Label Shift CO-ALignment》

    论文信息 论文标题:Generalized Domain Adaptation with Covariate and Label Shift CO-ALignment论文作者:Shuhan Tan, ...

  6. 去中心化金融-Lec3

    区块链 (什么是区块链?)区块链提供了一种无需可信的参与方,能够让多个参与方实现合作的方式(若存在可信的第三方,则不需要区块链:但是金融系统中往往没有可信的第三方) 终端用户工具:user inter ...

  7. C# List转SqlServer、MySql中in字符串

    var oneList = new List<string> { "1", "2", "3" }; var oneString ...

  8. json解析异常显示

    解决方案 1.取消FastJson的循环引用的检查:JSONObject.toJSONString(guardVoList,SerializerFeature.DisableCircularRefer ...

  9. 明解STM32—GPIO应用设计篇之API函数及配置使用技巧

    一.前言 本篇开始对STM32的GPIO在实际开发设计中的使用配置和技巧进行探讨,可以先去回顾下之前介绍的GPIO的相关理论基础知识包括基本结构,工作模式和寄存器原理. 了解过STM32的GPIO相关 ...

  10. ES6 新增数组,对象,字符串的方法

    1,ES6+ 新增数组方法 Array.from Array Array.from(arrayLike[, mapFn[, thisArg]]) 将类数组(伪数组)转换成数组 参数: arrayLik ...