Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix nested list #55178

Merged
merged 2 commits into from
Sep 10, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,33 @@ There are several reasons why you might want to switch from Vite to Next.js:
happens due to a couple of reasons:
1. The browser needs to wait for the React code and your entire application bundle to download
and run before your code is able to send requests to load some data.
1. Your application code grows with every new feature and extra dependency you add.
1. **No automatic code splitting**: The previous issue of slow loading times can be somewhat managed with code splitting.
2. Your application code grows with every new feature and extra dependency you add.
2. **No automatic code splitting**: The previous issue of slow loading times can be somewhat managed with code splitting.
However, if you try to do code splitting manually, you'll often make performance worse. It's easy
to inadvertently introduce network waterfalls when code-splitting manually. Next.js provides
automatic code splitting built into its router.
1. **Network waterfalls**: A common cause of poor performance occurs when applications make
3. **Network waterfalls**: A common cause of poor performance occurs when applications make
sequential client-server requests to fetch data. One common pattern for data fetching in an SPA
is to initially render a placeholder, and then fetch data after the component has mounted.
Unfortunately, this means that a child component that fetches data can't start fetching until
the parent component has finished loading its own data. On Next.js,
[this issue is resolved](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#no-client-server-waterfalls)
by fetching data in Server Components.
1. **Fast and intentional loading states**: Thanks to built-in support for
4. **Fast and intentional loading states**: Thanks to built-in support for
[Streaming with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense),
with Next.js, you can be more intentional about which parts of your UI you want to load first and
in what order without introducing network waterfalls. This enables you to build pages that are
faster to load and also eliminate [layout shifts](https://web.dev/cls/).
1. **Choose the data fetching strategy**: Depending on your needs, Next.js allows you to choose your
5. **Choose the data fetching strategy**: Depending on your needs, Next.js allows you to choose your
data fetching strategy on a page and component basis. You can decide to fetch at build time, at
request time on the server, or on the client. For example, you can fetch data from your CMS and
render your blog posts at build time, which can then be efficiently cached on a CDN.
1. **Middleware**: [Next.js Middleware](/docs/app/building-your-application/routing/middleware)
6. **Middleware**: [Next.js Middleware](/docs/app/building-your-application/routing/middleware)
allows you to run code on the server before a request is completed. This is especially useful to
avoid having a flash of unauthenticated content when the user visits an authenticated-only page
by redirecting the user to a login page. The middleware is also useful for experimentation and
internationalization.
1. **Built-in Optimizations**: Images, fonts, and third-party scripts often have significant impact
7. **Built-in Optimizations**: Images, fonts, and third-party scripts often have significant impact
on an application's performance. Next.js comes with built-in components that automatically
optimize those for you.

Expand Down
Loading