I want to use react js to make a news website with hundreds of articles. As I understand it, react makes single-page-applications. Surely it is not feasibly to include hundreds of articles in a single-page-application, so how could this be done?
You can absolutely use react to make a single page application which shows hundreds of articles.
The term single-page application describes how the articles are loaded when the user moves between the articles. In a multi-page application, every article will be its own html file. When the user clicks to go to a new article, your server sends a brand new html file, and the browser throws out the old page and shows a new one. In a single-page application, there's just one html file which is loaded at the start. As the user navigates between articles you use javascript to fetch data about that article (but not a full html file), and then you use that data to modify the existing page to look like a new page.
I have a nextjs app with two pages, they have same design but both display different data, what is the best way to implement this idea with keeping the url path unique for each page.
after asking some friends about this issue the best answer i got (from my prospective) is to separate the repeated code at the two pages into a new directory which I named shared and a new component that has only one job to display the data passed to it from both pages.
I am creating a Ecommerece application in React/Next Js. I want create dynamic routing with different peramaters for both product detail page and category page.
for Example if I click on category then its routing will be
https://www.mywebsite.com/my-category-page-url
If i click on any product from that category then its routing will be
https://www.mywebsite.com/my-product-detail-page-url
Note: I have already a live website with daily 30K visitors and with different tech stack which follows same url structure so I can not change the url structure.
Hello guys i am new to React Js i often hear and see posts regarding react is single page app but never understood what is SPA and many say that it doesn't reload the pages but i didn't understood why so could you guys please explain me with simple examples.
A Single Page Application is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.
This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page.
The goal is faster transitions that make the website feel more like a native app
Example: Netflix
This is the dashboard, and when we click on any movie, it changes to /watch and the content is rewritten.
In Technical Terms:
When building your react-app, you can see that there is only one
App.js from where your entire web-app is loaded in fragments and
components. This behaviour of rendering components and pages on a single page and changing the DOM( is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
As mentioned in Glossary of React Terms:
A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
And about "Why is React Js called as Single Page Application":
Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
A single page application has one single page e.g. www.google.ch. It is exactly one HTML file (with all its required dependencies) loaded into the browser. You'd navigate between paragraphs only using hash-router, but never ever visit another page like www.google.ch/maps (that would then be www.google.ch/#maps, which references / -> index.html) (tho google may not be the best example, it is more about URIs).
ReactJS is an open source JS library for building UI and used for SPA, and it manages the views of web apps. Reactjs can help you to modify your data without reloading of a page. It is a popular library in the market trend because of its scalability & fast performance.
Single Page applications are different from multiple page apps that we see everywhere because the SPA doesn't move into new pages; instead, it will load the pages inline within the same page.
In traditional websites, when we go from one page to another, the whole site is loaded. e.g - if you go from "www.example.com/hi" to "www.example.com/hello" the whole website is reloaded. No matter how much portion of the website is really changed. Let's say, the website has "Sidebar, logo, menu" on both of its pages, then the full reload doesn't make any sense. This takes too much time and decreases the performance.
Single Page Applications, as the name suggests, have only one single page that is loaded the first time you open the website. After this, no matter where you click, it is not gonna refresh the website fully.
browser reload button
The loading icon of the browser doesn't load when we move from one page to another on SPA site, as it does on the traditional websites.
Cons- SPA sites are great for UI UX but they are not the best when it comes to Search Engine Optimisation, it creates problems with rankings.
I have a backbone app (a blog) displaying different articles we can share on many platforms.
I try to use open graph with google and facebook, i update the properties in the router just before rendering the view.
But the thing is, when the scraper reach the app, it doesn't get the meta properties, i don't know if it doesn't execute javascript or if it's too fast, but if i set up some default meta properties directly in my single page it works.
However i need to update the meta properties about the url (each article has their own meta properties).
So, is it possible to use open graph with backbone.js ?
I am struggling with the problem and it seems Facebook is not running javascript in their end. There is no way, but creating separate page in your server for stuff you want to share on Facebook and include all meta tags statically in those pages.
There are services that will render javascript generated page for SEO purposes. Check out https://prerender.io
An alternative is to have your server populate the <meta> tags before the page is served.