Issue #18 - Server Components - Next 13.1 - DynamoDB

Issue #18 - Server Components - Next 13.1 - DynamoDB

<1/> React Server Components

Not to be confused with server-rendering, I know that is what I thought when I heard of server components. The React Core Team first announced this experiment in late 2020, there have been lots of improvements since React Server Components are a way of unburdening the client, with bundled Javascript that we would usually ship, and taking all this to the server.

React Server Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

The need for Server Components is because of the loading time it may take to wait for the client to fetch data and render, while all the network requests take place. With React Server Components we build components that span over the server and the client. React Server Components make it possible for us to get the best out of the server and the client. The server gets to fetch and render the UI and the client can focus on the maintaining state. What we end up with is a smaller Javascript bundle, faster page loads, and a better user experience.

There is no use of state, or lifecycle events, goodbye useState, and useEffect. This is because the component is run once and all the data is passed to the client. In other words, Server Components are stateless.

The more interesting benefit is the zero bundle, all the Javascript that the client depends on is entirely handled on the server and what gets sent to the client is the result. All the dependencies that are applications rely on, which increase the bundle size now live on the server.

The decision between Server Components is not an either-or, type of decision. Applications can be developed as a mixture of both, Server and Client Component, we just need to know when to use which when.

Interesting use cases have come out lately, Shopify's Hydrogen being one that has heavily adopted this. NextJS have Server Components in beta, using the app/ directory, all components under this directory will be server components by default.

<2/>Deeper Dives

<3/> The Dev Weekly 📰

Next 13.1 was release towards the end of 2022. Part of the exciting features that were announce was the app route, the edge runtime being more stable, some turbopack updates and built-in module transpilation. Special mention goes to import resolution for smaller bundles, npm packages tend to have a file that carries all the packages' export, or re-exports into a single file, generally this would be the outmost index.js file. This behaviour then allows for single import lines:

import { Button, Flex } from '@chakra-ui/react'

This is all good and well because bundlers understand to ignore dead code from the imports, if packages have a lot re-exports this could slow down the compile time, using babel-plugin-transform-imports you are able to go around this issue, however this is not the case though if you are using swc, hence we now have modularise Imports so you can now import files from their dist output. Turbopack now supports Tailwind, and postcss. More about Next 13.1 now

<4/> Inside the console 💻

Amazon DynamoDB is a managed NoSQL cloud database service that supports fast and predictable performance at any scale shielding users from the complexities of manual setup. NoSQL(Not only SQL) designs deliver faster data operations and can seem more intuitive, whilst not adhering to the ACID properties of a relational database.

DynamoDB has become a giant of the NoSQL world because it was primarily built for AWS’s operations. Considering what was at stake financially, anything less than reliability would simply not be torelated, DynamoDB powers multiple high-traffic Amazon properties and systems including Alexa, the Amazon.com sites, and all Amazon fulfillment centers. Moreover, many AWS services such as AWS Lambda, AWS Lake Formation, and Amazon SageMaker are built on DynamoDB, as well as hundreds of thousands of customer applications. Like any other AWS product aws was designed for failure, this makes DynamoDB a highly available, scalable, and distributed data store.

Checkout the latest DymanoDB whitepaper, features and pricing

<4/> Geeking It Up 🤓

Lucide
An open source icon library for displaying icons and symbols in digital and non digital projects.

State of AWS Security
Find out about how some misconfigurations that contribute to common security breaches

State of GraphQL
Find out more about the use of GraphQL, from what regions use it most, for how long and what features, they use

List of animations
If you do not want to go through half of the internet looking for underline/overlay animations, this is your place

ChatGPT
OpenAI released their conversational AI,

‍