I developed react js dynamic website. Now i am checking my website content of view page source not displayed my all content. only displayed default react index.html content only attached my view page source screenshot. but these two website (https://reactjs.org/ and https://www.netflix.com/in/) view page source working well. what I do my website. could you please solve issues.
React is rendered on the client using JavaScript (virtual DOM) to handle the real DOM and place the HTML elements in the browser.
This is why you will see a single DIV (root) react uses to mount your whole app on.
If you want to send to the client HTML files already rendered on the server-side you'll have to use an SSR framework like Next.js, which Netflix for example uses itself.
Related
Case Study
Consider the following scenerio:
I have a Node-Express server
The server renders a new .html file for every page and sends it to the client
Within each .html file:
there is some dynamic content filled in with EJS (such as the user's name in the navigation bar),
and part of the page (inside a <div id='app'></div>) is a React App (for instance, a table view with filters).
ReactJS, ReactDOM, and my React code is imported using <script src="___.js"> tags
Every time the client clicks on a link to go to another page, the server handles the routing and generates a new .html file that has
some dynamic content (e.g. user name in navbar)
A div containing a new React App, with the react code imported in script tags
Question
My question is Am I right to say that when it comes to Routing, this application uses "Server-Side Routing" and as for Rendering, a mixture of Client and Server-Side Routing?
Regarding your questions #2 and (perhaps) #3:
I would distinguish between static content, which is the same for all users of an app, and dynamic content, which depends on the user and can also change over time.
Server-side rendering is when the server produces HTML page that contain dynamic content. Such pages cannot be cached (at least not in a public cache, and even a private cache would have to be invalidated as the content changes over time). A further consequence of server-side rendering is that the whole HTML page must be reloaded when the dynamic content changes.
An alternative approach is a static (cacheable) HTML page that loads and renders all dynamic content with Javascript code (AJAX). This leads to pages that build up over time, as the dynamic content is loaded, and the "time to visual completeness" can become an issue.
Your approach sounds like a compromise where HTML pages contain some dynamic content, whereas other parts of the dynamic content (that change more frequently, I assume) are handled with AJAX methods.
I'm currently working through the next.js tutorial, but I'm struggling to understand the following:
The tutorial is telling me here, that clicking a <Link> element won't trigger a server request, and instead do "Client-side navigation", i.e. adjusting the page content with js:
The Link component enables client-side navigation between two pages in the same Next.js app. Client-side navigation means that the page transition happens using JavaScript
Three questions right away:
This sounds like regular SPA react routing without next.js etc. to me. But it isn't, right?
The <Link> still works if I disable javascript in Chrome dev tools. This shows that the transition is actually not happening with js. Is this a contradiction to their statement?
When I right click the page and click "view source" (in Chrome) I get different HTML before and after clicking the <Link>. (Contratry to the "regular" react behavior). How can this be considered "Client-side navigation"?
Going further in the tutorial, they tell me here:
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript
This statement sound like a contradiction to the other one quoted above. Can you help me to clarify this? When I click the <Link> what exactly is happening? Is a new html file loaded? If so, how can this happen "client side". Thank you!
Here is how I understand it:
The approach Next.js takes for client-side navigation is a mixture of SPA-style navigation and traditional navigation
In SPA-style navigation, a "link" is a component with some JS logic. It does not have a <a> element. When you click on it, some JS will run to render the new page. If you disable JS then you can't navigate to a new page;
In traditional navigation, a link is really a <a> element. If you click on it, then the browser will discard the current page and load the new page entirely. If you disable JS then you can still navigate to the new page;
In Next.js navigation, a "link" is a component with some JS logic, but it also has this <a> element under the hood. When you click on it, some JS will run to render the new page and prevent the default <a> navigation. So even if you disable JS, you'll still be able to navigate in a traditional fashion through the <a> element. The pre-rendered page will be fetched and loaded. This is really useful in terms of SEO (as crawlers typically don't have JS enabled), and is the main problem Next.js wants to solve.
In short, when JS is enabled, Next.js navigation behaves just like in SPAs; when JS is disabled, it behaves just like in traditional websites.
Update:
I made a video to further demonstrate the concept: https://www.youtube.com/watch?v=D3wVDE9GGVE
There!
I think the main concept that you should be getting familiar with Next.js framework is Server Side Rendering, which basically means that all contents of a page are pre-processed in the server, that ships to the browser the files already rendered, saving resources from the client-side of an application.
By default, all of your Next.js pages are pre-rendered when you use the build command.
Next.js also has its own <Link /> component which uses the next-router module to navigate between the pages.
By default, every <Link /> component in a page tells Next.js to pre-fetch that page and it's resources ( which will also be rendered by the server on the initial request from the browser ) and be "instantly available" when you click it.
I think the main basic difference than a regular SPA is that in those, when you change pages, it takes longer because they won't be already available to you.
AFAIK:
This sounds like regular SPA react routing without next.js etc. to me. But it isn't, right?
Yes. It's like a regular SPA react routing. When user clicks on Link, it will do it in JS just like CRA.
The still works if I disable javascript in Chrome dev tools. This shows that the transition is actually not happening with js. Is this a contradiction to their statement?
This is happening because, if you disable JS, what you get is a simple <a href="..." />. ie, browser will still count it as a anchor element, click events will work as expected because it's just our old HTML.
When I right click the page and click "view source" (in Chrome) I get different HTML before and after clicking the . (Contratry to the "regular" react behavior). How can this be considered "Client-side navigation"?
Your answer lies in the next statement where:
By default, Next.js pre-renders every page. This means that Next.js
generates HTML for each page in advance, instead of having
it all done by client-side JavaScript
ie, when you "View source" browser will hit the server and show you the HTML. Since Next prerenders, it will be different for different pages. This has nothing to do with client navigation. This behaviour of showing browser response in view source can vary from browser to browser though.
My website is built in React and I want to create a DOM variable, within GTM, that attaches to the meta description. Trying the usual meta[property="description"] method and it's not working. Any help would be more than welcomed!
I have a package contains all the css, Js and HTML file in that package i have a index.html page which has an activity that loads in web browser, How to load it in mob app using react native. My index.html file path is file:///Users/usarama/Documents/DownloadFlow/packets/test/index.html
You can't render your web version on mobile as ionic framework provides.
Hope this link helps you
https://medium.com/#alexmngn/from-reactjs-to-react-native-what-are-the-main-differences-between-both-d6e8e88ebf24
Coming a bit late, but you actually can render your web version on mobile. You should look into react-native-webview and "react-native-static-server". The idea is that, you create a static server from within your RN application, and then pass the uri of that server to the WebView component. Take a look at this guide.
As I'm using angular route for my SPA, my view page source is empty (only ng-view exists). I see a website developed by react , has the similar functionality. But when I see the page source, content is there. (ex for angular, ex for react)
How is it possible in react ? And why not in angular? Any idea?
Edit: As crawlers like google, supports SPA crawling since a few years ago, Is it really necessary to use server side rendering?
Server side rendering might not be implemented in angular project which you are looking at, that's why you are not able to see the rendered html. React and angular2 has the feature of server side rendering, which means you can render html from your script on server and send that html to client.
You can see only in page sources ng-views because it doesn't execute JS what is needed to render another elements in your SPA. React can be rendered on server side and gives rendered HTML to your browser while Angular is rendered only in your browser