Unify React Native with Media Queries & Nextjs SSR for Higher ROI

It is common knowledge that if your application continues to grow, you need to reach people on an extensible platform. Your initial stack should be adaptable enough to meet these expansion requirements as a result.

React Native for Web, which is another flexible web app development technology, allows programmers to use React Native Components and APIs on the web. Given that React Native is one of the most widely used web app frameworks for creating cross-platform mobile applications, it has been a game changer when it comes to competing with mobile-first frameworks.

Now, our goal is to unify React Native Web with Responsive styles and Next JS Server-Side Rendering to improve SEO on the web and generate a higher ROI.

How to Combine RNW with Media Queries and Next JS SSR with UI Kits and Style Libraries

TamaGui

Enter TamaGui, a comprehensive UI kit for RNW, has features like composable, themeable, and sizable components along with proper platform adaptability. It uses a single RNW codebase, which allows you to write less code that runs faster. Other notable features include:

• X, Y, and Z stacks with improved performance
• Space property for adding space between elements
• Offer complete support for all the properties of React Native
• A multi-faceted optimizing compiler that allows SSR-first atomic CSS

The following example shows the use of different style properties in Tamagui:

Source: https://tamagui.dev/docs/components/stacks/1.0.0

ThemeableStack

The stack, used to include several helpers that configure theme values when they are true, is beneficial for building higher-level components through wrapping of styled():

NativeWind

Alternatively, NativeWind is a utility-first style library that can be used for handling media queries with Next JS SSR. It utilizes Tailwind CSS to produce a universal style system for RN. The components are shared between platforms, and their styles will appear as Stylesheet.create for native and as CSS Stylesheet on the web. NativeWind offers a uniform styling experience across various platforms, as well as improves developer UX and code maintainability by pre-compiling your styles and using a minimal runtime.

Core Features

• Faster runtime: Everything runs smoothly and fast because of small runtime
• Universal style system: For each platform, it uses the best style system
• DevUX: These plugins simplify setup and improve intellisense support
• Precompiled: Since NativeWind uses the Tailwind CSS just-in-time compiler, which helps in generating styles at build time
• Pseudo classes: These include focus, hover, and active pseudo classes on compatible components.
• Parent state styles: These style children based on the parent pseudo classes
• Packed with Several Features: It comes with features like media queries, arbitrary classes, custom values, themes and plugins

The following code snippet displays the use of NativeWind components:

Source: https://snack.expo.dev/90tECwYlt

Is Forking RNW a Viable Option?

Forking could be an option; but not a feasible one if maintaining a fork of React Native Web with possible style inconsistencies is a worry for you. Then, react-native-media-query could be used because it does media queries inside React Native Web’s Stylesheet.
The following is the standard React Native Web output from StyleSheet:

Source: github.com

The wrapped StyleSheet produces the following Dripsy output and has one responsive styles in each viewport breakpoint:

<style>
@media screen and (min-width: 1024px){
  .rn-1mnahxq { margin-top: 10px; }
  .rn-61z16t { margin-right: 10px; }
  .rn-p1pxzi { margin-bottom: 10px; }
  .rn-11wrixw { margin-left: 10px; }
  // …
  // and the remaining set of styles, whether component or atomic styles
}
@media screen and (min-width: 480px){
  .rn-1mnahxq { margin-top: 5px; }
  .rn-61z16t { margin-right: 5px; }
  .rn-p1pxzi { margin-bottom: 5px; }
  .rn-11wrixw { margin-left: 5px; }
  // …
  // and the rest of the set of styles, whether component or atomic styles
}
</style>

For ease of use and seamless user experience, the atomic CSS can be obtained by using the following piece of code:

import styleResolver from ‘../StyleSheet/styleResolver’;
const sheet = styleResolver.getStyleSheet();
const content = sheet.textContent(); // to get the atomic CSS.


Common Ways of Unifying Server-Side Rendering with React Native Web

Three typical approaches for combining SSR with RNW are:

• Googlebot: SSR only the mobile version for SEO purposes. But for users, perform Client-Side Rendering (CSR). A GoogleChrome/Rendertron proxy or manual user-agent sniffing might be used to accomplish this. Despite the fact that Google can object to receiving different content from people.
• Mobile-first: SSR just for mobile page markups, with fixed/predetermined breakpoints. Allow the user to select "Show desktop version" on the first page before setting a cookie for all upcoming requests. Less CSS and HTML is transferred over the network by avoiding rendering numerous layouts, breakpoints, and sub-trees.
• Fresnel Library: SSR all the breakpoints. If the user-agent string is regarded as untrustworthy when sniffing, there could be some RNW compatibility issues with Fresnel. Currently, dramatic layout modifications (including markup/structural changes) rather than merely classic responsivity make Fresnel more valuable. To optimize the bytes sent over the wire, you need to SSR depending on user-agent sniffing where it is applicable.

Conclusion

With the present restrictions, becoming mobile-first seems to be the simplest course of action. If you use React Native Web for app development, you probably want a native mobile app to function as a web app in a browser as well. It does not need to be so responsive that it can totally modify the layout (including markup, as Fresnel assumes), to instantly morph into a desktop version as well, in order to just obtain the mobile version in the browser.
To make the designs and CSS responsive enough to fit all mobile screens, you simply require media queries. It can initially center-display the mobile version when viewed on a PC. On the initial visit from a desktop browser, the small trade-off is that it only takes one click for the visitor to see the full desktop version.
Thus, better frontend performance (page speed index), improved Search Engine Optimization, and higher ROI are the big reasons why we unify React Native Web with responsive styles and NextJS SSR.