DEV Community: rosa-rzi

How to manage node versions across projects

rosa-rzi — Wed, 15 Nov 2023 22:59:47 +0000

If you're currently utilizing Docker container projects, there's no need to worry about your existing Node version. But that’s another different topic from this one that I’ll probably share with you in the future. For now, I'd like to share my story with using nvm across all my Node.js projects on my macOS system.

Note: If you have a pre-existing Node.js version on your machine, it will remain accessible as the default version. This allows you to continue using and installing nvm.

1) Get nvm installed in your macOS terminal console

Option 1:

brew install nvm

Option 2:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

Option 3:

wget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

2) Indicated nodejs version required in my project folder in a git-tracked .nvmrc file:

echo v18.14.1 > .nvmrc

install it

npm install v18.14.1

3) This does not take effect automatically on cd, the user must do it:

nvm use

Now you can see all the node versions you have installed with

nvm list

.nvmrc is documented at: https://github.com/creationix/nvm/tree/02997b0753f66c9790c6016ed022ed2072c22603#nvmrc

Choosing the Right Rendering Method in Next.js: A Quick Guide

rosa-rzi — Fri, 27 Oct 2023 05:05:16 +0000

In my previous post, I talked about the different types of rendering in Next.js (SSR, SSG and CSR), and in this post we'll go over deciding which rendering method to use.

Your choice will depend on your project's specific requirements and objectives. Let's break down how to make this decision:

1. Data Dependency

If your page relies on dynamic data that changes with each request, go for SSR. It generates the page on the server, ensuring up-to-date data.

For content that can be pre-generated with data at build time and doesn't change frequently, SSG is a good choice.

If your page needs real-time data updates, consider CSR with client-side data fetching libraries.

2. Performance Requirements

SSR offers good initial load performance but might be slower for frequently updated or high-traffic pages.

SSG provides excellent performance, as pages are pre-generated and served as static files, reducing server load and load times.

CSR can offer fast page transitions and interactivity but may have slower initial page load times.

3. SEO

If SEO is a priority, SSR and SSG are preferred because they make it easy for search engines to index your content.

4. Complexity

SSR and SSG are easier to set up as they generate HTML on the server. CSR can be more complex, especially when handling client-side data fetching and hydration.

5. Resource Consumption

SSR consumes server resources as it generates pages on the server for each request. SSG is less resource-intensive as pages are pre-built. CSR relies primarily on client resources.

Final thoughts

You can mix and match rendering methods within your application. For instance, you can use SSR or SSG for most of your site and CSR for specific interactive parts.

Think about the user experience you want to provide. If speed and interactivity are crucial, lean towards CSR. If consistency and SEO are a priority, SSR or SSG might be a better choice.

Summary

In conclusion, choosing the right rendering method in Next.js is all about aligning your choice with your application's unique needs and goals. Carefully assess factors like data requirements, performance, SEO, complexity, and user experience to determine the most suitable approach. You can even use a mix of methods to strike the right balance between performance and interactivity for your web application.

Next.js Rendering

rosa-rzi — Sat, 14 Oct 2023 15:38:00 +0000

Rendering = from code to HTML

Next.js has three types of rendering:

Server-Side Rendering
Client-Side Rendering
Static Site Generation

These can be grouped into two categories: Pre-Rendering (Server-Side and Static site) and Client-Side Rendering.

Pre-rendering fetches the data and transforms the React components before the result is sent to the client (i.e. generates it in advance on a server). Whereas Client-Side Rendering does the process on the user's device.

Now what's the difference between the two types of Pre-rendering? Server-side rendering generates the HTML of the page on a server for each request and then sends it to the client. Static site generation also generates the page on a server however, content is generated once and is stored then re-used for each request.

So how do we decide which rendering method to use with Nextjs? Stay tuned for my next post!

Cheers,
Rosa