8.The profound impact of modern frameworks on SEO

1. Introduction

Next and Nuxt are the two most popular and used modern web development frameworks. They are built based on React and Vue respectively, and also represent the full-stack frameworks of these two ecosystems. Next is a React framework developed by Vercel, while Nuxt is a server-side rendering framework for Vue. They all strive to simplify the development process, improve application performance, and provide many built-in features for SEO optimization.

2. Next and Nuxt page rendering mechanism

Both Next and Nuxt provide four common rendering methods, SSR, SSG, IRR, and SCR. But there are very big differences in details.

1. Server-side rendering (SSR):

- Advantages: Search engines can directly crawl the complete HTML content, which is conducive to SEO's rapid indexing. - Implementation: - Next (App Router): By default, all components are server components, automatic SSR. - Nuxt: via asyncData or fetch.

2. Static site generation (SSG):

- Advantages: Pre-rendered pages, fast loading speed, very beneficial to SEO. - Implementation: - Next (App Router): Use the generateStaticParams function for static generation. - Nuxt: routeRules in nuxt.config.ts can be configured directly.

3. Incremental static regeneration (ISR):

- Advantages: It combines the performance advantages of SSG with the freshness of dynamic content, which is beneficial to SEO. - Implementation: - Next (App Router): Implemented by exporting the revalidate variable in the page file. - Nuxt: routeRules in nuxt.config.ts can be configured directly.

4. Client-side rendering (CSR): - Disadvantages: Not good for SEO because there is less initial HTML content. - Implementation: - Next (App Router): Use the 'use client' directive to mark the component as a client component. - Nuxt: supported by default.

In the end, when actually writing, the two frameworks are mixed rendering, which can be part server and part client. However, if we purely discuss the development experience, Nuxt is a more natural way of writing, and there is no need to deal with the boundary issues between server and client. In the page, we only need to use the await useFetch + Lazy attribute configuration, and which components are rendered on the client side and which components are rendered on the server side are automatically processed. We only need to write down as usual.

This is indeed a traditional performance of the Vue ecosystem, which is simple, easy to use and strong in DX. However, in some more complex and special scenarios, this advanced encapsulation will bring about some fundamentally unsolvable problems.

In comparison, Next is a lot harder to write. One reason is the way the boundaries are written, and the other is that sometimes you have to deal with hydration issues manually.

3. Experience with the two frameworks and a collection of SEO issues

3.1. Next App SSR route jumps slowly

When performing routing jumps throughout Next, you will go through such a process.

1. Trigger route changes: Users click on links or trigger route changes programmatically.

2. Request RSC Payload: Next.js first requests the RSC (React Server Components) payload of the new route. This payload contains the structure and data of the server component.

3. Display loading status: After the RSC payload request is completed, if the loading.js file exists, Next.js will display the loading UI defined in it.

4. Process RSC Payload: The client receives the RSC payload and starts processing.

5. Streaming rendering: If streaming rendering is used (for example, via React Suspense), some content may start to display.

6. Client