服务器渲染

前言 什么是SSR(Server-Side Rendering)？类似于用Java、ASP.NET、php开发前端页面，服务端准备数据并执行页面渲染，然后把完整的HTML发送给客户端。现代化的SSR通常和Vue、React等前端框架强关联，通过Node.js在服务端提前将page、component使用同构方式渲染为html代码，其目的是在实现SSR时尽量复用一套渲染机制。例如Vue框架就同时支持了CSR(Client-Side Rendering)和SSR。 SSR能解决什么问题？ SEO: Google、百度、Yandex、Bing或者Yahoo等搜索引擎会通过网络爬取你的页面并建立索引，如果的信息越完整，那么你的网站就更容易被检索到。使用SSR技术，让页面在服务端提前渲染好再返回给客户端，这样各类搜索引擎就能拿到比较完整的页面信息，提升检索质量。 首屏渲染：SPA(Single Page Application)将页面渲染放到客户端执行，并且在渲染之前要加载大量的Javascript代码，所以首屏渲染需要花费较长时间。而SSR直接在服务端渲染完再返回客户端，使用户能够快速看到页面内容。 有哪些框架支持SSR？ 开源库 支持语言 star数 描述 Nuxt Vue 54.9k 快速构架、类型安全、高性能、易扩展 Next React 127k 老牌框架、社区完善、Data Fetch、Styling quasar Vue 26k 丰富的UI、支持桌面端和移动端 Remix React 29.9k 极致的用户体验、开箱即用 本知识点将以 Nuxt 为例，介绍如何实现 SSR。 什么是Nuxt 基于Vue、React、Angular实现的full-stack框架数不胜数，但就Vue框架领域内，应该数Nuxt最为Top 1。Nuxt保持了Vue生态的“开箱即用”特性，类似于Vite，几条指令就可直接run起来。如果你熟悉Vue，那么基于Nuxt写应用，体验上和写Vue客户端应用极其相似。 Nuxt提前预制了一套目录结构，并自动处理路由、导入、数据获取，开发人员仅需按约定的规则实现页面、组件、数据API即可，极大降低开发人员学习成本。Nuxt的特性可总结为： 基于文件的路由: 页面统一添加到pages/目录下，例如添加index.vue、about.vue、contact.vue，就可以通过/访问首页，通过/about返回关于页面； 代码分割：得益于Vue的Virtual Node，Nuxt根据目录规则提前生成完整的依赖树，这样能够将所有code拆分为最小单元的chunks, 从而减少应用初始化加载时间； 开箱即用的SSR：Nuxt内部使用Vue的SSR，除了Vue实现SSR、CSR本身的差异，可以像开发CSR的Vue应用一样来开发SSR，降低研发心智负担； 自动导入：在实现页面或组件时，不需要像CSR手动导入(import Card from './Card.Vue')依赖，当Nuxt识别到有使用外部组件，bundle过程会自动识别； 数据获取工具：提供一套组合式FetchAPI，实现client、server端的同构； 配置好的构建工具：默认使用Vite构建，同时支持Webpack、Rspack； Nuxt的架构设计和vue/core很相似，将整体功能拆分为独立的package: 核心引擎：nuxt； bundlers: 打包器包含@nuxt/vite-builde、nuxt/webpack-builder、@nuxt/rspack-builder； 命令行工具：nuxi； 服务端引擎：nitro； 开发套件：@nuxt/kit； 上手体验 初始化项目 使用nuxi提供的指令初始化项目： npx nuxi@latest init nuxt-learn-examples 如果安装过程下载失败，可能需要配置hosts: 185.199.108.133 raw.githubusercontent.com 最新nuxt版本3.14初始化的项目目录比较简单，少了pages、plugins等目录，入口为app.vue： ...