DEV Community: revoltez

SSR Before & After Next 13

revoltez — Tue, 26 Sep 2023 09:15:42 +0000

Numerous individuals, myself included, embarked on their journey of learning Next.js with version 13. Nevertheless, my comprehension of Server-Side Rendering (SSR) was somewhat flawed until I delved into the historical workings of Next.js, specifically how it operated before the 13th version. Presented below is a succinct overview highlighting key concepts and distinctions between Next.js pre and post its 13th version. (please correct me if im wrong)

Pre-rendering

By default, Next.js pre-renders every page, meaning that HTML for each page is generated in advance rather than relying solely on client-side JavaScript. Pre-rendering can lead to improved performance and SEO. Each generated HTML includes the minimum JavaScript code required for that specific page. When a page loads in the browser, its JavaScript code runs, rendering the page fully interactive (referred to as "hydration").
it comes in two forms: SSR and SSG.

SSR & Hydration

SSR primarily focuses on the initial page load. When employing SSR, you transmit HTML to the client and subsequently load all your standard React JavaScript. The application becomes "hydrated" once the JavaScript is loaded, returning to its full functionality as a client-side React app. In essence, after the initial page load, your application remains the same as a regular React app, with the exception that the first page load consists of pure HTML.

React Server Components (RSC)

React Server Components are a new feature of react 18, they operate by executing all the logic of React components on the server and sending only the resulting HTML to the client, without the inclusion of JavaScript. so the end result is pure html and no subsequent hydration happens (no sending js for interactivity)

the cool thing about RSC is that you can use your fetch api DIRECTLY at the top of your component (not inside a useEffect).

before next 13

in a nutshell The traditional getServerSideProps function was basically doing the work of RSC (React Server Components) and also indicating that this page should be SSR (meaning pre-render the html and hydrate the js later for interactivity).

getServerSideProps was formerly used in Next.js to retrieve data on the server side and pass it as props to your page component. This was beneficial for pages that required pre-rendering of frequently updated data from an external API, such as a blog or a news site.

Utilizing getServerSideProps improved page performance and SEO by providing HTML to the client with pre-filled data.
Before Next.js version 13, getServerSideProps was the method for indicating that a page should utilize SSR, which entailed pre-rendering HTML per request and subsequently hydrating the JavaScript.

After next 13

After next 13, its has gotten even better with "use client" and RSC, all your components are RSC by default, which means no js generation, just html generated from the server and sent to the client, however if you needed interactivity and needed SSR instead of RSC you can indicate that a component is SSR by putting just "use client" at the top of your component (which means you should propably avoid fecthing data directly at the top of your component since that function will re-execute for each render, instead put it inside a useEffect() like you always used to).

Client components still participate in server-side rendering (SSR) or build-time static site generation (SSG), serving as clients to convert the initial render output of React components into HTML that can be rendered before downloading JavaScript bundles. However, they cannot leverage server-only features such as direct database access.

Escaping nihilism with Vim

revoltez — Tue, 30 May 2023 13:47:42 +0000

Nihilism, in a nutshell, is the haunting absence of meaning, a philosophical void that engulfs individuals in a world perceived as devoid of purpose. It is within this bleak landscape that we seek to ignite a spark of hope and excitement. Imagine, for a moment, a path that leads away from nihilism, where every action, no matter how small, becomes infused with meaning.

Enter Vim, a text editor that holds the key to escape this existential abyss. In this article, we invite you on a transformative journey where the incorporation of meaningful actions through Vim can guide you toward the liberation from nihilism's grip. Brace yourself, for within the realm of Vim lies the power to reclaim purpose and embrace a life brimming with significance.

As developers, we often find ourselves trapped in a cycle of meaningless actions that only deepen our descent into nihilism.

In the vast realm of modern editors like Visual Studio Code (VSCode) or Sublime Text, we encounter a plethora of shortcuts that seem to revel in their lack of inherent meaning.

Take, for instance, the baffling combination of Ctrl + Shift + ; a true masterpiece of nonsensical keybinding. One can't help but ponder, what does this obscure trio of keys even signify? Is it a secret code to unlock the mysteries of the universe? Or perhaps a clever ploy to confuse and confound unsuspecting developers? Alas, the absurdity persists, leaving us to question our very existence as we perform finger acrobatics to summon a function whose purpose remains shrouded in enigma.

In the realm of Vim, motions reign supreme, offering a glimpse into a world where every command carries meaning, as if conversing with a conscious entity. Let us explore the superior nature of Vim's motions, where the editor becomes a living being, and life gains a newfound sense of significance.

dw - Delete Word:
With a simple "dw" command, Vim understands your intention to delete a word. The editor listens, comprehends, and effortlessly eradicates the designated word, creating a space where emptiness once resided. This act of purposeful deletion echoes our innate desire to shed the unnecessary and make room for the meaningful.
ct - Change Till:
The "ct" motion embodies a transformational power unique to Vim. It allows you to specify a character and then alter the text until that character, eradicating the old and ushering in the new. It is a conversation with Vim, a conscious exchange where your intent is understood and honored. In this interaction, you shape your code, reshaping your reality in the process.
di{: Delete Inside Curly Braces:
With the "di{" command, Vim allows you to effortlessly delete the content within curly braces. It understands your desire to remove the inner substance, leaving behind a void, ready to be filled with new meaning. This command embodies the notion of stripping away the unnecessary to reveal the essence of what truly matters.you want to delete inside parenthesis, then say it, replace { with (. vim understands.
gg - Get genesis:
The "gg" command serves as a portal to the very beginning, a journey to the top of the document. As you traverse through lines and pages, Vim acknowledges your longing to revisit the origins, to reflect upon the past. It is a reminder that meaning can be found by retracing our steps, understanding our journey, and seeking wisdom from where it all began.

all these are very simplistic and impossible to forget shortcuts that you will use wherever you go because they make so much sense they became intuitive, you dont have to think about how to do something you simply say it and vim as a conscious being will do it.

the treacherous realm of bloated editors like Visual Studio Code (VSCode), where simplicity is but a distant memory. Picture this: you innocently open a small file, hoping for a seamless editing experience, only to be greeted by an editor that devours RAM like a ravenous beast. Your machine wheezes under the weight of unnecessary features, as if the editor itself decided to wage war against your productivity and therefore pursuit of meaning.

But fear not, for Vim emerges as the unsung hero, forever faithful and steadfast in its lightweight nature. While bloated editors betray you with their insatiable hunger for system resources, Vim remains a beacon of sanity. Imagine finding yourself stranded on a server, sans graphical user interface, desperately needing to edit crucial config files. The bloated editors you once relied upon are nowhere to be found, leaving you feeling abandoned and lost. But lo and behold, Vim comes to the rescue! It is the ever-present companion, preinstalled in the depths of every Unix system, ready to lend its minimalist prowess to any file, no matter how humble or complex.

With Vim, you need not fret about RAM-devouring monsters or missing features. It offers the same unwavering capabilities with unrivaled performance, ensuring that even the most demanding tasks can be tackled with finesse. While others suffocate under the weight of their own complexity, Vim elegantly glides through files, preserving your sanity and empowering your coding endeavors.

so why would anyone that knows vim replace it if it has better performance, lightweight and cures nihilism. unless you are Nietzsche, go and learn vim.

The problem of singletons

revoltez — Thu, 22 Dec 2022 08:09:29 +0000

Singletons are a design pattern in which a class is designed to have only one instance and provides a global point of access to that instance. In JavaScript, singletons can be implemented using a variety of techniques.

For example, the browser itself provides a number of singleton objects and functions that are available globally, such as the window object and the console object. These objects and functions provide access to various browser APIs and features, such as the DOM, the JavaScript runtime, and the browser console.

The use of singletons can be controversial in software development because they can make it difficult to reason about the state of an application and can create tight coupling between components. In addition, singletons can make it difficult to test and maintain code because they can introduce two major problems:

global state

Global state refers to state that is shared across multiple components or modules in an application and is not localized to a specific component or module. This can make it difficult to understand the behavior of the code because the state of the application can be affected by many different components, and it can be difficult to determine which components are responsible for specific changes to the state.

dependencies that are not explicit. it is not clear which components or modules depend on a singleton or how the singleton is used. This can make it difficult to understand the relationships between components and to modify the code without breaking existing functionality.

For example, consider the following code that defines a singleton class:

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

This singleton class is designed to have only one instance and provides a global point of access to that instance through the getInstance method. If this singleton class is used in multiple places in an application, it is not clear which components or modules depend on the singleton or how the singleton is being used. This can make it difficult to understand the relationships between components and to modify the code without breaking existing functionality.

For example, if you wanted to modify the behavior of the singleton, you might not know which components or modules are using the singleton and how they are using it. This can make it difficult to test and maintain the code, as you might have to modify or update many different components or modules that are using the singleton in order to make the desired changes.

how to use web3.js instead of Ethers in react Dapp and connect to hardhat node

revoltez — Tue, 21 Jun 2022 16:14:19 +0000

i created a repository that is the same as a truffle react box however i use web3.js instead of ethers and functional components and hardhat instead of truffle, just follow the steps in this repository repository

Truffle React box using functional Components

revoltez — Wed, 15 Jun 2022 19:34:05 +0000

Function truffle React box is the same as the original React box except it uses functional components

TokenSwap smart contract!

revoltez — Mon, 08 Nov 2021 09:16:00 +0000

I wrote a TokenSwap smart contract that swaps two erc20 tokens and takes a fee, it has two panels, the user panel where users can buy one of the two erc20 tokens and an Admin panel that charges the TokenSwap smart contract with the Two tokens and sets the Ratio of TokenA to TokenB and set the fees

code on:
https://github.com/revoltez/TokenSwap

how does Entity Framework Core figure out where to get the connection string in .NET Core app?

revoltez — Sun, 06 Dec 2020 10:50:13 +0000

have you ever wondered how does EF Core finds the connection string even if you have decoupled the connection string from the Context class?

first in Asp.net Core :

what if your context class looks like this

    public class ApplicationDBContext : DbContext
    {
        public ApplicationDBContext(DbContextOptions options):base(options){}

        public DbSet<Employee> Employees { get; set; }   
    }

the proper way to put the connetion string is to put in a seperate file for example appsettings.json and we usually register the context class in the ConfigureServices
method in startup.cs like this

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<ApplicationDBContext>(
                dbContextOptions =>
                 dbContextOptions.UseMySql(Configuration.GetConnectionString("DefaultConnection"))); 
        }

EF core actually have a convention to follow to find the connection string, if we comment the CreateHostBuilder method EF will output this error

Unable to create an object of type 'ApplicationDBContext'. For the different patterns supported at design time, see https://go.microsoft.com/fwlink/?linkid=851728

this means Entity looks for this method and figure out what is the name of the startup class in the UseStartup method and then figure out how to instantiate the Application context.

in console app

and if you are using a simple console App in .Net Core then and you dont create a constructor with parameters then it simply looks for the OnConfiguiring method and looks for the connection string.