SEO之路 - 前端CSR转SSR

SEO之路 - 前端CSR转SSR

什么，是SEO

SEO（Search Engine Optimization，搜索引擎优化）是指通过优化网站内容和结构，以及提高网站的可信度和权威性，从而在搜索引擎中获得更高的排名，进而提高网站的流量和转化率。SEO的重要性在于它可以帮助网站在竞争激烈的互联网市场中脱颖而出，吸引更多的有意向的访问者，提高网站的曝光率和知名度。

具体来说，SEO包括以下几个方面：

网站内容优化：优化网站的内容，使其更具有吸引力和价值，提高用户体验，同时也更容易被搜索引擎识别和推荐。
网站结构优化：优化网站的结构，使其更易于被搜索引擎抓取和索引，以及更具有可读性和可访问性。
关键词优化：通过研究用户搜索行为和竞争对手情况，选择正确的关键词并合理地使用它们，以提高网站在搜索引擎中的排名。
标签优化：使用正确的标签和元素，包括标题、描述、关键词、ALT标签等，以帮助搜索引擎更好地理解网站内容和结构。
外部链接优化：通过获得其他网站的链接，提高网站的权威性和可信度，从而增加搜索引擎对网站的信任度和排名。

综上所述，SEO对于网站的发展和成功非常重要，它可以帮助网站获得更多的流量和转化率，提高品牌知名度和竞争力，从而实现更好的商业效益。

什么，是SSR

SSR（Server-Side Rendering，服务端渲染）是一种将服务器端渲染出的HTML页面直接返回给浏览器的技术，相比于传统的SPA（Single Page Application，单页面应用程序）客户端渲染，SSR具有以下优点：

更好的SEO：由于搜索引擎爬虫无法执行JavaScript代码，传统的SPA页面往往无法被搜索引擎正确地解析和收录，而SSR可以在服务器端生成完整的HTML页面，使搜索引擎能够正确地识别和收录页面内容，从而提高网站的SEO效果。
更快的首屏加载速度：传统的SPA页面需要先下载JavaScript文件，再通过Ajax请求数据，最后才能渲染出页面内容，而SSR可以在服务器端直接生成完整的HTML页面，减少了客户端渲染的时间，从而提高了页面的加载速度和用户体验。
更好的可访问性：由于SSR在服务器端生成完整的HTML页面，使得页面内容更容易被屏幕阅读器等辅助工具解析和读取，从而提高了页面的可访问性。

SSR的原理是将客户端请求发送到服务器端，服务器端根据请求生成完整的HTML页面，并将页面内容返回给浏览器。在SSR中，服务器端使用一些框架或库（如React、Vue等）来生成HTML页面，同时也需要考虑到数据的获取和处理、路由的匹配等问题。

在实际应用中，SSR可以与客户端渲染相结合，实现更好的性能和用户体验。例如，在首屏加载时使用SSR，后续页面的交互则使用客户端渲染，从而兼顾了SEO和性能的需求。

SSR（Server-Side Rendering，服务端渲染）对于SEO的重要性在于它可以使搜索引擎更好地理解和收录网站的内容，从而提高网站的排名和曝光率。因此，对于需要提高网站SEO效果的企业和个人来说，使用SSR技术是非常重要的选择。

前端SSR开发框架

在React SSR框架的选型中，需要考虑以下几个方面：

社区支持：选择一个有活跃社区支持的框架可以获得更好的技术支持和更新维护，同时也能够获得更多的资源和插件。
性能表现：SSR框架的性能表现对于用户体验和SEO效果都有很大的影响，因此需要选择一个性能表现比较好的框架。
开发效率：SSR框架的开发效率也是一个重要的考虑因素，需要选择一个能够提高开发效率的框架。
技术栈匹配：需要考虑自己的技术栈和团队的技术水平，选择一个技术栈匹配和易于上手的框架。

以下是一些常用的React SSR框架：

Next.js：Next.js是一个基于React的SSR框架，它提供了一系列的优化和功能，包括自动代码分割、静态页面生成、热更新等，同时还支持多种数据获取方式（如API、文件系统、数据库等），可以快速搭建高性能的React应用。
Gatsby：Gatsby是一个静态站点生成器，也支持React SSR，它基于React和GraphQL技术栈，提供了一系列的功能和插件，包括自动优化、图片压缩、SEO优化等，可以快速生成高性能、高质量的静态站点。
Razzle：Razzle是一个通用的SSR框架，它基于React和Webpack技术栈，提供了一系列的功能和插件，包括自动代码分割、热更新、静态资源优化等，可以快速搭建高性能的React应用。
After.js：After.js是一个基于Next.js的SSR框架，它提供了一些额外的功能和插件，包括路由自动化、代码拆分、SEO优化等，可以快速搭建高性能、高质量的React应用。

综上所述，选择一个合适的React SSR框架需要综合考虑以上因素，根据自己的需求和技术栈选择最适合的框架。

框架选择和注意事项

基于Nextjs强大的开发团队和庞大的社区，决定使用Nextjs作为开发框架。但是因为此次SEO开发是在原有前端工程基础上的融合，所以有一些因素还是要考虑好：

Nextj现在有两种路由开发模式，App 路由和 Page 路由：
1. App 路由：App 路由是用于在 Next.js 应用程序中管理全局导航和布局的路由系统。
  - 它由 Next.js 的路由器组件 next/router 提供支持。
  - 使用 App 路由，您可以在页面之间进行导航，并处理 URL 参数、查询字符串等。
  - App 路由可以用于处理用户的导航需求，例如在页面之间切换、跳转到特定页面或执行其他导航操作。
2. Page 路由：Page 路由是指基于文件系统的路由系统，它由 Next.js 自动处理。
  - 在 Next.js 中，您可以创建以 .js、.jsx、.ts 或 .tsx 结尾的页面文件，它们将自动映射到对应的 URL 路径。
  - 例如，创建名为 about.js 的文件将映射到 /about 路径。
  - 您可以在页面文件中编写 React 组件，并通过导出该组件来定义该页面的内容。
  - Page 路由允许您轻松创建动态路由，例如使用文件名中的参数或目录结构来定义动态路径。
  虽然App路由模式具有很多新功能和新特性，但由于App路由模式是在最近推出的新版本中加入的，不排除有很多潜在的问题，而Page路由已经存在很久了，有了完善的功能探索和相关的社区反馈，更有利于在开发，所以最终选择用Page路由模式。
现有的前端使用了MUI（Material UI）作为主要的组件库进行开发工作，组件库是否支持服务端渲染是一个主要的考虑因素。

MUI的官方文档给出了很好的帮助说明(https://mui.com/material-ui/guides/server-rendering/)

基本需要做的事情就是利用emotion cache 来维护渲染页面所需要的css样式，并在每次请求页面是，正确的将样式插入到页面中。

官方也给出了对应Next.js的使用实例，帮助开发人员快速的搭建MUI + Nextjs的工程，加速开发进度。• Next.js (TypeScript version)

后续优化

页面的访问速度是SEO中关键的一点。Next.js 提供了多种预渲染（Prerendering）选项，以优化应用程序的性能和搜索引擎优化（SEO）。下面是 Next.js 中的两种主要预渲染方式：

静态生成（Static Generation）：
- 静态生成是 Next.js 中的一种预渲染方式，它可以在构建时（Build Time）生成 HTML 页面。
- 使用静态生成，您可以将数据获取逻辑与页面组件结合，以在构建时获取数据并生成静态 HTML 文件。
- 这些静态 HTML 文件可以被部署到服务器或 CDN 上，并由客户端直接请求，从而实现快速加载和高性能。
- 静态生成适用于那些不经常更改内容的页面，例如博客文章、产品列表或静态内容页面。
服务器端渲染（Server-side Rendering）：
- 服务器端渲染是一种在每个请求时动态生成 HTML 页面的预渲染方式。
- 使用服务器端渲染，每个页面都可以在服务器上进行渲染，并将生成的 HTML 发送到客户端。
- 这种方式允许您根据每个请求的数据来动态生成页面，适用于需要个性化或实时数据的页面。
- 服务器端渲染还提供更好的 SEO 支持，因为搜索引擎可以直接读取呈现的 HTML 内容。

由于当前项目需求是用Nextjs渲染产品落地页，而产品落地页的渲染内容不会更新的很频繁，所以选取静态生成的模式来构建页面可以最大化的提升访问页面的速度。

SEO之路：前端CSR转SSR