SSR brings several benefits to Next.js applications: Improved SEO: SSR enables search engines to easily crawl and index our pages, leading to better search engine rankings and visibility. Faster initial page load: Pre-rendered HTML is sent from the server, resulting in shorter load times and a better user experience. Enhanced performance on low-end devices: SSR reduces client-side processing,… Continue reading Benefits of SSR( Server side rendering).
Tag: React
SSR( Server side rendering) in Next js.
Server-side rendering is a key feature of Next.js, a popular React framework for building web applications. SSR refers to rendering web pages on the server before sending them to the client’s browser. Why to choose SSR ? In traditional client-side rendering (CSR), the server sends a basic HTML file when we visit a website. Then, our browser fetches… Continue reading SSR( Server side rendering) in Next js.
useEffect Hook in React: Managing Side Effects
What is useEffect? useEffect is a React hook that provides a way to perform side effects in functional components. Side effects are operations that occur outside the regular rendering process and often involve tasks like data fetching, subscriptions, or manually changing the DOM. Use Cases of useEffect useEffect(() => { const fetchData = async… Continue reading useEffect Hook in React: Managing Side Effects
Understanding State and Props in React Components
What is State? In React, state is a special object that represents the current condition or data within a component. It allows components to keep track of information that may change over time. What are Props? Props (short for properties) are a way to pass data from a parent component to its child components. They… Continue reading Understanding State and Props in React Components
React’s useState Hook
what is useState ? useState is a special function in React that allows functional components to use and manage state. Before hooks were introduced, state management was exclusive to class components, but with hooks, functional components can also keep track of their own state. Basic Syntax import React, { useState } from ‘react’; function ExampleComponent()… Continue reading React’s useState Hook
Word Wrap for Long Words in CSS
To handle long words that cause overflow issues in your design, you can apply CSS styles to control the overflow of text within the elements. You can use the CSS property word-wrap and set it to break-word. This will allow long words to break and wrap onto the next line instead of overflowing the container.… Continue reading Word Wrap for Long Words in CSS
Issues in fetching special characters in Next Js / React.
Sometimes situations can be risen in fetching special characters into the website when working with latest frontend technologies like react, Vue js , next js etc. It’s must that we have to deal with these issues. A library called “He” could be a better solution in this situation. The “He” library is typically used for… Continue reading Issues in fetching special characters in Next Js / React.
key features of useEffect hook in React component
Purpose: useEffect is a React hook used for handling side effects in functional components. Side effects can include data fetching, subscriptions, DOM manipulations, and more. Functionality: It allows performing operations after the component renders or when certain dependencies change. Syntax: It takes two arguments: a function and an optional dependency array. Function Argument: Contains the… Continue reading key features of useEffect hook in React component
How to remove the blue highlight of button on mobile?
When trying to create buttons, links or input fields using latest development technologies like next js, react and angular etc there might be some times a default background color may appear. This can cause bugs for the developed website since they create a different background color different from the mockup. As solution we can use… Continue reading How to remove the blue highlight of button on mobile?
Include JSON Lottie files in Next JS Project
Sometimes, there might be situation arises where we have to add JSON Lottie files in our project for improving UI and also making user friendly. We cannot directly use Lottie files in Next JS project instead we have to do the followings. Install lottie-react using npm i lottie-react –legacy-peer-deps Create a folder to add Lottie… Continue reading Include JSON Lottie files in Next JS Project