32、React Server - Side Rendering and React Native Introduction

React Server - Side Rendering and React Native Introduction

1. Server - Side Rendering (SSR)

Server - side rendering (SSR) is the process of generating the static markup for a UI on a server and sending it to the client. With React, SSR involves using React - DOM to render either an HTML string that React can reuse on the client - side or static markup.

1.1 How to Observe SSR

You can use developer tools to inspect the document loading process. For example, if you use the Chrome or Firefox developer tools to inspect the performance tab of an application like social.react.sh , you’ll see that the server sends down fully - rendered HTML instead of waiting for the application bundle to load before rendering. When running the application in production mode, you may notice a difference in speed.

1.2 Aspects of SSR

• Routing : Using a routing solution like React Router allows you to share routes between the client and server, enabling code sharing across platforms.
• Data Fetching : Necessary data should be fetched on the server to achieve a “complete” render.
• State Management : Tools like Redux can be used for state management in SSR.

1.3 Considerations for SSR

• Complexity : SSR can be complex to implement and is only suitable in certain cases, such as when you’re concerned about SEO, need a quick first paint, or use React as a static markup generator.
• Performance : The performance gains of SSR are only realized when the page payload sent by the server is not overly large. A large payload may lead to a longer response time and more data, negating the benefit of a quick first paint.
• Browser - Specific Features : Features that require a browser environment need to be patched or handled so as not to run on the server.
• Server Requirement : Practically, SSR requires running a Node.js server or calling out to one to generate HTML for the client.

1.4 SSR in React

In React, you can use ReactDOM.renderToString() to generate an HTML string that React can reuse on the client - side or ReactDOM.renderToStaticMarkUp() for static markup. React can “take over” the markup generated on the server without re - rendering existing elements on the browser.

2. Introduction to React Native

Before React Native, creating mobile applications had two main options: using native iOS and Android platforms and languages or hybrid approaches. Hybrid approaches often used a web view and exposed interfaces to native SDKs, but the apps were not “really native” and sometimes had performance and feel issues.

2.1 Features of React Native

• Cross - Platform Development : You can write JavaScript applications that also use native code (e.g., Swift or Java) and compile them into native applications for iOS and Android.
• UI Element Creation : React Native can create the same UI elements on Android and iOS, simplifying mobile app development.
• Native Code Integration : You can add your own native code when needed, not being limited to JavaScript.
• Similar Concepts to React : React Native apps share idioms with React, providing a component - driven, declarative development experience and similar APIs in some cases.
• Developer Tooling : The developer tooling allows for hot reloading, saving development time by avoiding long compile cycles.
• Code Sharing : It enables code sharing across platforms, reducing the number of engineers needed for a project and the number of codebases to maintain.
• Logic and Style Sharing : You can share business logic and styles between React web apps and React Native apps.

2.2 How React Native Works

React Native creates a bridge between your JavaScript code and the underlying mobile platform. Most mobile devices can execute JavaScript, and React Native takes advantage of this. When JavaScript and native code are executed, the bridging system uses the React core library to translate the component hierarchy into a view on the mobile device. It also translates native events into events that your JavaScript or native code can handle and renders the appropriate UI based on state or prop changes. Finally, it bundles all the code and compiles it for release on app stores.

graph LR
    A[JavaScript Code] --> B[React Native Bundler]
    B --> C[Bridge Interface]
    C --> D[Mobile Platform Native SDK/APIs]
    D --> E[iOS/Android]
    E --> F[App Store/Play Store]
    G[Native Code] --> C

2.3 React Native Example Component

import React, { Component } from 'react';   
import { Text, View } from 'react-native';              
export default class WhyReactNativeIsSoGreat extends Component {
    render() {
        return (
            <View>                 
                <Text>                         
                    If you like React on the web, you'll like React Native.
                </Text>
                <Text>
                    You just use native components like 'View' and 'Text',
                    instead of web components like 'div' and 'span'.
                </Text>
            </View>
        );
    }
}

In this component, View is similar to a div in a browser, and Text is similar to a span . This shows that broad React concepts persist across platforms. You can experiment with React Native using an online platform like Repl.it (https://repl.it/KOAE/3).

3. React and React Native Comparison

3.1 Comparison Table

Aspect	React	React Native
Runtime	Targets browsers and uses browser - specific APIs. Properties like class and ID are common in web - based components. Runs on browser - based devices with different threading, CPU utilization characteristics.	Targets mobile devices. Native platforms have different layout and styling semantics, so properties seen in web - based React are not common. Runs on mobile devices with different underlying technology.
Core APIs	Many React - specific APIs are used, but networking, layout, etc. APIs are browser - oriented.	Aims to import some familiar browser - oriented APIs (e.g., Fetch API for networking, Flexbox API for layout). Exposes mobile - specific events like onPress.
Components	No “built - in” components for UI elements. You create them yourself.	Includes components for text, views, images, etc., which are primitives for mobile UI creation.
Use of React core library	Uses the React core library and the react - dom library for rendering in browsers.	Uses the React core library but has its own rendering system for mobile devices.
Lifecycle methods	Components have lifecycle methods handled by React - DOM.	Components also have lifecycle methods, but they are handled by the React Native platform - specific system.
Event types	Implements a synthetic event system for browser events.	Exposes mobile - specific events such as gestures (pan, zoom, drag).
Styling	Uses CSS API for styling.	No CSS API in regular mobile development. Most CSS properties can be used, but for cases like animations, platform - specific APIs are needed.
Third - party dependencies	Can use third - party component libraries.	Can also use third - party component libraries, and many popular ones have React Native variants.
Distribution	Can be deployed to almost any modern browser.	Requires platform - specific distribution tooling (e.g., Xcode) and the React Native build process for compilation and release.
Development tooling	Benefits from browser - specific tools for debugging and development.	Focuses on hot reloading, which speeds up mobile development.

3.2 Detailed Differences and Similarities

3.2.1 Runtime

The runtime difference is significant. React is designed for browsers, so it relies on browser - specific APIs. For example, when creating a web - based React component, you might use properties like class and ID to style and identify elements. In contrast, React Native targets mobile devices, and native platforms have different ways of handling layout and styling. Mobile devices also have different hardware capabilities, such as different CPU and memory management, which affect how React and React Native applications run.

3.2.2 Core APIs

Although both use the React core library, the core APIs for specific functions differ. React uses browser - specific APIs for networking, layout, and other operations. React Native, on the other hand, tries to bring in some familiar browser - oriented APIs while also exposing mobile - specific events. For example, the onPress event in React Native is specific to mobile touch - based interactions.

3.2.3 Components

In React, you have to create your own components for UI elements like images and text layout. React Native comes with built - in components for these basic UI elements, which simplifies the development process for mobile applications.

3.2.4 Use of React core library

Both React and React Native use the React core library for component definition. However, React uses the react - dom library to interact with the browser, while React Native has its own rendering system to interact with mobile devices. This allows for similar component - writing patterns across platforms.

3.2.5 Lifecycle methods

Both React and React Native components have lifecycle methods. In React, these methods are handled by the React - DOM system. In React Native, they are managed by the React Native platform - specific system, but the overall concept of component lifecycle remains the same.

3.2.6 Event types

React uses a synthetic event system to handle browser events. React Native exposes mobile - specific events, such as gestures that are common on touch - screen devices. This difference is due to the different input methods and interaction models of browsers and mobile devices.

3.2.7 Styling

Styling in React is mainly done using the CSS API. In React Native, there is no traditional CSS API in mobile development. Although most CSS properties can be used, for certain features like animations, different APIs are required for iOS and Android. This can make it challenging to directly share CSS styling between web and native projects, but there are cross - platform libraries available to help with this.

3.2.8 Third - party dependencies

Both React and React Native can use third - party component libraries. Many popular libraries, such as React Router and styled - components, have variants that target React Native, which is a great advantage for developers.

3.2.9 Distribution

React applications can be deployed to almost any modern browser with relative ease. React Native applications, however, require platform - specific distribution tooling. For example, for iOS development, you need to use Xcode, and you have to go through the React Native build process to compile and release the app on app stores.

3.2.10 Development tooling

React benefits from browser - specific development tools for debugging and development. React Native has a focus on hot reloading, which allows developers to see changes in the app without waiting for a long compile cycle, speeding up the mobile development process.

graph LR
    A[React] --> B[Browser - Specific]
    A --> C[Uses React - DOM]
    A --> D[CSS Styling]
    E[React Native] --> F[Mobile - Specific]
    E --> G[Own Rendering System]
    E --> H[Platform - Specific Styling]
    B --> I[Runtime Differences]
    C --> J[Rendering Differences]
    D --> K[Styling Differences]
    F --> I
    G --> J
    H --> K

In conclusion, React and React Native share the same core React concepts but have significant differences due to their different target platforms. Understanding these differences and similarities is crucial for developers who want to work across web and mobile platforms using React.