react-server | A server only implementation of React | Frontend Framework library

No.

From https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md#capabilities--constraints-of-server-and-client-components :

Server Components: As a general rule, Server Components run once per request on the server, so they don’t have state and can’t use features that only exist on the client. Specifically, Server Components:

• ❌ May not use state, because they execute (conceptually) only once per request, on the server. So useState() and useReducer() are not supported.
• ❌ May not use rendering lifecycle (effects). So useEffect() and useLayoutEffect() are not supported.
• ❌ May not use browser-only APIs such as the DOM (unless you polyfill them on the server).
• ❌ May not use custom hooks that depend on state or effects, or utility functions that depend on browser-only APIs.
• ✅ May use server-only data sources such as databases, internal (micro)services, filesystems, etc.
• ✅ May render other Server Components, native elements (div, span, etc), or Client Components.

Server Hooks/Utilities: Developers may also create custom hooks or utility libraries that are designed for the server. All of the rules for Server Components apply. For example, one use-case for server hooks is to provide helpers for accessing server-side data sources.

Well, actually it is still a complicated issue for all of us to realize when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:

Next.js automatically adds the React import when JSX is used indeed. However keep in mind that we do still need to import React from 'react' when the React variable is used.

So this will show us, whenever we just want to use JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case we have to do that.

For production builds,inside client config, you don't use the style loader. You need to use the extract-text-webpack-plugin instead. You did it correctly in your server build config. But this config shouldn't be in your server build, as in the server's source code, you never use (s)css files.

You could use react-native-router-flux package in npm for routing in react-native.

link : https://www.npmjs.com/package/react-native-router-flux

I believe the issue stems from the fact that requiring babel-register will not work for the file you import it in, but for files that get imported afterwards. So the JSX syntax of will not be picked up by the renderToString method. This has happened to me before and including babel-register for the syntax never felt clean to me anyway.

What I personally have done and many others do is this: readDomServer.renderToString(React.createElement(RoutingContext, props)) using the createElement method in React, you can accomplish the same thing. This will solve your issue.

You have 2 options that I can think of.
Given the following interface:

The third potential answer, or removing the //= require react-server from ./app/assets/javascripts/server_rendering.js, was a step in the right direction.

Removing this line doesn't yield a new issue, it just reveals another error you had the entire time. react_server doesn't define the $ variable for AJAX calls, the jQuery gem does.

Found here. I am confident in this solution because the error:

Uncaught ReferenceError: $ is not defined

is a jQuery issue, as the AJAX calls you are probably making take a form referenced in their official doc. here.

Therefore, after running gem install jquery-rails in your shell, your ./app/assets/javascripts/application.js should look like this: