NEXTJS 12 - Server component

#react #nextjs #tutorial #javascript

Next 12 was released last October.
The first thing that catches my eyes and gets me curious is SWC the new rust compiler that will give faster refresh and build.
Compilation using Rust needs to be 17x faster than Babel.
Also, the server component looks promising.
Let's take the new version for a ride 🚴🏼‍♂️.
Link: https://github.com/yanirmanor/next12-server-components

Lets create new next js 12 application

npx create-next-app@latest

Then change to configuration

// next.config.js
module.exports = {
  swcMinify: true
}

That it. Now you can enjoy the power of SWC.

Let's add Tailwindcss for nice and fast CSS power.
We will use Tailwindcss with JIT mode.

Here are the advantages that JIT offers:

Lightning-fast build times
Every variant is enabled out of the box
Generate arbitrary styles without writing custom CSS (top[-10px])
Identical CSS in development and production
Better browser performance in development

First, we will need to install and init.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit
npx tailwindcss init -p

Then we need to add mode JIT.

// tailwind.config.js
module.exports = {
 mode: "jit",
 purge: ["./src/**/*.{js,jsx,ts,tsx}"],
 darkMode: false, // or 'media' or 'class'
 theme: {
  extend: {},
 },
 variants: {
  extend: {},
 },
 plugins: [],
};

And import to the global css file.

//global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

And for hot refreshing add this to .env file

TAILWIND_MODE=watch

That's it and you are ready to use Tailwind
For more information and examples you can check in
https://tailwindcss.com/

Finally, we will take a look at react server component.
First, we need to upgrade for the alpha version of react 18.

npm install react@alpha react-dom@alpha

We need to add this 2 flag in the config file.

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}

if you already have customized pages/_document component, you need to remove the getInitialProps static method and the getServerSideProps export if there’s any, otherwise, it won't work with server components.

To run a component on the server, append .server.js to the end of the filename. For example ./pages/demo.server.js is a Server Component.
For client components, add .client.js. For example, ./components/info.client.js.
You can then import other server or client components from any server component.

The server components will always be server-side rendered and streamed to the client, and will not be included by the client runtime.
You will need to wrap the server component with Suspense.

Conclusion

I love the new compiler, this is a good staff for nextjs for the development user experience.
for the server component, I don't feel it's ready its have some bugs.
I found some issues with using the fetch from the new react-fetch npm module.
It's also is very hard to find information and examples.
What I love and why I think it will rock -
Direct option running SQL from the server component
No client-server waterfall of API calls
more secure.
I love the flexibility that it gives, but I think a developer will need to think about when and what will be on the server and what is good to stay on the client. still, it was fun.