-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main'
- Loading branch information
Showing
1 changed file
with
14 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,18 @@ | ||
## Next.js App Router | ||
|
||
[![Next.js CI](https://github.com/zenWai/nextjs-dashboard/actions/workflows/ci.yml/badge.svg)](https://github.com/zenWai/nextjs-dashboard/actions/workflows/ci.yml) | ||
|
||
<ul> | ||
<li>Created a database in the same region as the application code to reduce latency between server and database.</li> | ||
<li>Fetched data on the server with React Server Components. This allows to keep expensive data fetches and logic on the server, reduces the client-side JavaScript bundle, and prevents database secrets from being exposed to the client.</li> | ||
<li>Used SQL to only fetch required data, reducing the amount of data transferred for each request and the amount of JavaScript needed to transform the data in-memory.</li> | ||
<li>Parallelize data fetching with JavaScript - where it made sense to do so.</li> | ||
<li>Implemented Streaming to prevent slow data requests from blocking the page, and to allow the user to start interacting with the UI without waiting for everything to load.</li> | ||
<li>Move data fetching down to the components that need it, thus isolating which parts of routes should be dynamic in preparation for Partial Prerendering.</li> | ||
<li><b>Database Setup</b>: Optimized for minimal latency.</li> | ||
<li><b>Data Fetching</b>: Uses React Server Components for efficient server-side handling, reducing client-side JavaScript and safeguards database secrets.</li> | ||
<li><b>SQL Utilization</b>: Fetches only necessary data, optimizing data transfer and in-memory processing.</li> | ||
<li><b>JavaScript Parallelization</b>: For efficient data fetching where applicable.</li> | ||
<li><b>Streaming Implementation</b>: Improves UI interaction during slow data requests.</li> | ||
<li><b>Data Fetching Isolation</b>: For effective Partial Prerendering.</li> | ||
<li><b>Dynamic Dashboard</b>: Implements next/cache.</li> | ||
<li><b>Search and Pagination</b>: Using URL Search Params and Next.js APIs.</li> | ||
<li><b>Handling Errors</b>: Catch errors (including 404 errors) and display a fallback to the user. Show form errors using the useFormState hook - while keeping accessibility in mind.</li> | ||
<li><b>ServerActions</b>: Offers server-side validation and data mutation.</li> | ||
<li><b>Routes</b>: Enhanced invoice routes with form validation and improved accessibility.</li> | ||
<li><b>Metadata</b>: Focused on SEO and shareability.</li> | ||
</ul> |