Qué es Single Page Application y Server Side Rendering en React

Understanding the difference between Single Page Application (SPA) and Server Side Rendering (SSR) is key to building modern websites and improving the user experience. In this guide, we explore their features and set up a basic React project with routing to implement these concepts in a practical environment.

What is a Single Page Application and what are its advantages?

• An SPA loads all HTML and resources at startup, which can generate a slight delay in initial loading.
• Once loaded, it allows for fast and fluid navigation without the need to reload the page.
• Ideal for user experiences focused on continuous interaction within the application.

What are the drawbacks of the SPA approach?

• By loading everything from the beginning, the initial load time may be slower on devices with lower capacity.
• Limited for SEO, as search engines may have difficulty indexing all the loaded content at once.

How does Server Side Rendering work and what are its benefits?

• SSR loads the HTML from the server on each page request, allowing for a faster initial load.
• It is ideal for SEO, as each view loads independently, making it easier for search engines to crawl the content.
• It improves accessibility and experience on resource-constrained devices, avoiding massive resource loading at startup.

When to use SPA or SSR?

• SPA: When an interactive and fast user experience is required within the application, without the need for advanced SEO.
• SSR: In applications where SEO and initial load speed are priorities, such as content or e-commerce sites.

How to configure a React project with React Router?

To create an SPA in React, let's set up routing with React Router DOM and organize the basic routes.

1. Initialize the project:

   npm create vite@latest my-react-routers-app.

   Select React with TypeScript as the base framework.

2. Install dependencies:
   Once inside the project folder, run:

   npm install npm install react-router-dom

3. Configure basic routing:

   • In the main.tsx file, wrap your application in BrowserRouter.
   • Create components for different views, such as Home and About, and define routes for them.

4. Add navigation links:
   Use React Router's Link component to connect the Home and About routes.

Example configuration in App.tsx

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';import Home from './components/Home';import About from './components/About';function App(){  return (   <Route path="/" element={ }  /> <Route path="/about" element={ }  />  ); } export default App;

5. Start the development server:
   Run the command

   :npm run dev

   Access localhost and navigate between the configured routes to verify operation.

What technologies can we use for SPA and SSR?

• For SPA: React with React Router DOM is a common choice for navigation in single page applications.
• For SSR: Next.js offers an SSR-optimized configuration and is ideal for improving SEO and user experience in React applications.