Skip to main content

1. What is Next js and why we need to use it in our projects ?

Next js Optimize your application in the way so you can render your pages/components extremely fast.

Later on we will see how it works.

So why we need NEXT JS. what does Next JS do that REACT doesn't ?

1) Next js simplifies the development process.

2) On top of that is optimize your web application.

3) Rendering: This is primary or main difference b/w react and next js.

Rendering : 

REACT JS render UI in client side and NEXT JS render UI in server side. NEXT JS also provide flexibility in rendering option.

So question is...!

What is client side rendering and server side rendering ?

Client Side Rendering is browser rendering that happened in user devices.

User ------> request to ----- Server

Server send back the HTML/CSS/JS files in browser and execute the code and than finally show website  to user.

Server Side Rendering : The web pages renders on server before transmitting it to the client device.

User ------> request to -----Server it process the request and render the components on server side than sends back the fully render HTML to client side.

It makes initiate display of website so fast.

This distinction highlights an essential aspect of website.

SEO:

Search Engine Optimization, Search engine crawler face difficulties in indexing pages dynamically render of components on client side. As a result the seo performance pf such pages suffer.

This issue is resolved by sending pre-rendered code directly to the client browser.

This leads to...

1) Fast Crawling (seo)

2) indexing in google search

Why SEO is so important ?

SEO is crucial for optimizing website visibility and ranking(indexing) in search engine results.

                                            Routing System In NEXT JS

NEXT JS uses the file based routing system, which means each folder in app directory in act like a route.

                                   NEXT JS very IMPORTANT FEATURE

1) We can create full stack applications with NEXT JS.

2) API Router: Enabling the creation of server-less functions to handle API requests.

Server-less Api's are endpoints for creating API's without the need for traditional server.

It allows us to build and deploy API's

3) Without managing server infrastructure

4) Worrying about scaling the server as traffic increase. e.g route.js file in any route/page directory, directly act like API endpoint.

app -> profile -> route.js

Code spitting: It is a technique that breaks large bundle of JS code into smaller, more manageable chunks that can be loaded on need.

What is the benefit of that...

This reduces the initial load time of the website. Optimize the UX while browsing the website.

Conclusion:

NEXT JS is not entirely new technology. If still build fundamentally on top of react.

What NEXT JS manage than?

1) Routing 2) Code Splitting 3) SEO 4) rendering automatically.

This automation save much time and also reduce the efforts.

Simple is that it streamline the development process by automating several functions.



Labels:

Comments

Post a Comment

Popular posts from this blog

Install MariaDB Latest Version 11.4 in Red Hat Version 9

 This this post i will show you step by step the installation process of mariaDB in red hat version 9. Step1 Run the command to pull the latest updated packages on applications installed in your system. -dnf update If you get Kernal update than reboot the system -reboot Step2 Go to official mariaDB site Make mariadb repository in /etc/yum.repos.d Place the configuration in this file # MariaDB 11.4 RedHatEnterpriseLinux repository list - created 2024-09-24 11:12 UTC # https://mariadb.org/download/ [mariadb] name = MariaDB # rpm.mariadb.org is a dynamic mirror if your preferred mirror goes offline. See https://mariadb.org/mirrorbits/ for details. # baseurl = https://rpm.mariadb.org/11.4/rhel/$releasever/$basearch baseurl = https://mirrors.aliyun.com/mariadb/yum/11.4/rhel/$releasever/$basearch # gpgkey = https://rpm.mariadb.org/RPM-GPG-KEY-MariaDB gpgkey = https://mirrors.aliyun.com/mariadb/yum/RPM-GPG-KEY-MariaDB gpgcheck = 1 Now install the mariaDB with its dependencies package...
Post a Comment
Read more

Redis installation in Red Hat Linux

 In this post we will see step by step installation of Redis service in Redhat/CentOS operation system. To install Redis, run this command in terminal -dnf install redis This command will install the redis service in your machine. Verify installation -systemctl status redis -systemctl start redis -systemctl enable redis Note: Before start redis service set Linux Kernal overcommit memory to 1 by adding vm.overcommit_memory = 1 to /etc/sysctl.conf file. Why we should do that: As we know redis is in memory data store. It primarily uses RAM to store data. Redis and other processes use RAM memory. We set vm.overcommit_memory = 1 to make sure Kernal not overcommit the memory by allocating memory to new program which required more memory than available memory. In this scenario OOM (Out Of Memory) killer terminate the rest of processes. We also restricting Kernal not to terminate the important services running and also stop swapping redis and other importance service to device i/o device,...
Post a Comment
Read more

Prepared statements, form submission, form validation and displaying errors in php

PHP Code. Insert statement Query. INSERT INTO `users`(`user_id`, `user_first`, `user_last`, `user_email`, `user_uid`, `user_pwd`) VALUES (1,'Adnan','Zaib','text@.com','Admin',1234) What are Prepared statements and how to use them //Created a sql prepare template $sql = "SELECT * FROM users WHERE user_uid=?;"; //than send to database with certain values left(unspecified parameters). //Create a prepared statement $stmt = mysqli_stmt_init($conn);   //prepare the prepared statement if(!mysqli_stmt_prepare($stmt, $sql)){ echo "sql statement failed"; }else{ //bind values to parameters and further to placeholder mysqli_stmt_bind_param(#stmt, "s",); // ‘s’ stands for datatype of parameter that you are going to pass. }   while($row = mysqli_fetch_assoc($result)){ echo $row['user_uid'] . "<br>"; } PHP form Validation   <?php // define variables and set to empty values $name = $email = $gender = $comment = ...
Post a Comment
Read more