0

0

JavaScript 时代服务器端渲染的复兴

心靈之曲

心靈之曲

发布时间:2024-10-31 11:56:35

|

685人浏览过

|

来源于dev.to

转载

javascript 时代服务器端渲染的复兴

随着 React 19 的发布以及提供服务器端渲染的 React 框架(例如 Next.js 和 Remix),一切似乎都回到了原点。嗯,那是因为它是 — 只是现在您可以使用 JavaScript 完成所有这些操作。

过去,像 PHP 这样的语言会通过在服务器上为每个请求动态生成 HTML 来处理服务器端渲染。这意味着当用户访问站点时,服务器将发回完全呈现的页面。它对于 SEO 非常有效,对于互联网连接速度较慢的用户来说非常有用,因为他们不必等待 JavaScript 加载和水合页面。

然后,客户端渲染 (CSR) 的兴起,包括 React、Angular 和 Vue 等库。这个想法是构建高度交互的单页应用程序(SPA),可以加载一次并动态更新,而不需要全页刷新。虽然这使应用程序感觉快速和流畅,但它带来了一些权衡:搜索引擎优化不佳、初始加载缓慢以及在低端设备上的体验不太理想。开发人员开始注意到这些差距,尤其是博客或电子商务商店等内容丰富的网站。

为什么 SSR 卷土重来

采用 React 框架的现代 SSR 旨在找到传统服务器渲染模型和高度交互的 SPA 世界之间的最佳平衡点。如今的 SSR 不仅仅生成静态 HTML;还生成静态 HTML。它还启用 Hydration,服务器发送预渲染的 HTML,一旦页面加载,React 就会接管以使其具有交互性。这会带来更快的页面加载、更好的 SEO 和更高的可访问性。

立即学习Java免费学习笔记(深入)”;

更令人兴奋的是,Next.js 和 Remix 等框架允许您根据每个页面的需求选择渲染方法。您可以将 SSR 用于内容较多或 SEO 关键的页面,并使用 客户端渲染 (CSR) 用于不需要搜索引擎索引的高度交互部分。考虑仪表板和高度动态的内容。他们甚至提供静态站点生成(SSG),它在构建时预渲染页面,以及ISR(增量静态再生),其中静态页面按需更新。

android使用JSON进行网络数据交换 WORD版
android使用JSON进行网络数据交换 WORD版

本文档主要讲述的是android使用JSON进行网络数据交换;JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成,非常适合于服务器与客户端的交互。JSON采用与编程语言无关的文本格式,但是也使用了类C语言的习惯,这些特性使JSON成为理想的数据交换格式。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载

JavaScript 生态系统中的 SSR

新一代 SSR 还利用现代 API。 React 19 专注于并发渲染和流传输,这意味着页面可以分块发送到客户端,从而提高感知性能。结合 React 服务器组件 (RSC) 等功能(减少发送到浏览器的 JavaScript 数量),这些进步使得 React 的 SSR 比过去更具可扩展性。如果您想了解有关 React 19 的最新更改的更多信息,请查看我的文章。

通过像 Next.js 这样的框架与 Edge FunctionsCDN 深度集成,SSR 现在更接近用户,从而减少了延迟。这是一个巨大的胜利,特别是对于全球应用程序而言。我们不要忘记,SSR 不仅仅是渲染,它还涉及数据获取。例如,Remix 重新构想了路由处理数据的方式,使 SSR 不仅成为可能,而且与在发送页面之前在服务器上返回数据的加载器无缝连接。顺便说一句,Next.js 15 即将发布,不要错过最新更新!

开发者应该记住什么

虽然 SSR 提供​​了很多好处,但它并不是灵丹妙药。它可能会带来复杂性,尤其是在缓存、跨客户端和服务器的状态管理以及在水合作用期间处理重新渲染方面。开发人员需要仔细权衡何时使用 SSR、CSR 或 SSG 以获得最佳性能。 Next.js Middleware 等工具可以帮助在边缘实现逻辑,以决定渲染页面的方式和位置。

简而言之,SSR 回来了,而且比以往任何时候都更好。它提供了过去如此受欢迎的性能和 SEO 优势,现在又加上了现代 JavaScript 生态系统的强大功能和灵活性。无论您是在构建电子商务网站、博客还是仪表板,如果您想提供快速、引人入胜且搜索友好的体验,SSR 都是您不可忽视的工具。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1416

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

381

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

941

2025.04.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

514

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

298

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5306

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

481

2023.09.01

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

13

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 7.4万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号