I currently have a website that uses SSR (using nextJS) to render the landing page in the root directory. However, I want the website to render my create-react-app application when the user is logged in. When the user is logged out, I want the website to show the landing page.
So my question is, is it possible to conditionally render using SSR when logged out, and use CSR when logged in? I'm just looking for general guidance on how to build the architecture that handles such event.
(The reason why I use SSR is for SEO reasons. My app doesn't need SEO so I want to use CSR instead. I also want to avoid using subdomains for now.)
It is possible with two options below:
(Recommended) Create a proxy server (just another Node server on top of your SSR and CSR servers), and implement the logic to proxy requests to either SSR or CSR in different cases. Or,
Create a custom Next server and route any logged-in requests to CSR. However, this option will sacrifice some major Next features.
Related
I have been working in nextjs since recently. I previously programmed in react, but the project requires me to use nextjs.
Briefly the application looks like this
Home page (simple backend data + form ), here I will 100% use SSR
Admin panel (/admin)
And here I am wondering whether to use SSR or CSR in admin page, I find conflicting information. If I use CSR in case of admin panel, will it somehow affect SEO? (I think it shouldn't, since the site requires a login anyway). I read that if the site requires authentication then there is no point in rendering the data on the server side. But on Reddit someone also wrote that simple admin pages can also be safely created using SSR. If so, does it give any advantages?
Or, however, would it be worthwhile to separate it into 2 different applications with the annotation (admin.mywebsite) in the domain? and what is the correct approach to such a problem?
I care about the best possible SEO, hence my questions.
If you don't need the casual user to see the admin panel, you can simply ignore it in your robots.txt file and use any preferred method (CSR or SSR), and it won't impact your SEO.
However, in the case you do want users to see the admin panel (for any future viewers), SSR is much more scrapable by web robots and is preferred for SEO.
I want to make partially SSR web application and looking for best solution for that. I need SSR for SEO and that will only serve dynamically rendered products pages - this will be handled by NextJS.
Other part of the app is only for logged users and I don't want anybody not logged to accidentally display it (but only users data have to be secure, if anyone access by a hack those restricted pages without any user data that's ok) - for that part I've already implemented React Router with proper redirections and few routes (it's using Redux too).
Whole project was made with create-react-app. Is there a way to easily combine those two functionalities? Do I have to move everything from /src to /pages? Maybe best way would be to serve them independently and just redirect to one or another using Apache configuration?
If anybody wonders about it - currently the best solution would be to use NextJS for all of it, cause Next provides a clean way to handle static pages, CSR and SSR alongside each other.
By the default all pages are static generated or pre-rendered with partial CSR, while using getServerSideProps method allows to handle SSR, without any extra configuration.
Currently, my project has two parts, one is before login, and one is after login.
What I want to achieve is, before login needs to be fast and SEO friendly, should I choose pre-render or SSR?
And after login, we can choose CSR (so the client is able to wait for the page to load).
Alternatively, can I do two CSRs, one for before login (fast load), and once client logged in, by JWT token, redirect to the after login CSR page?
Thanks
For pages that need to be crawled, most probably CSR is not an option. The question then becomes whether you choose to pre-render or SSR. The answer to that is that it depends.
Is the SEO content static, or does it depends on other some backend API response at a given time?
If it's static, pre-render should be enough for you. But if it depends on other APIs, the content could change during runtime, and you would have to do true SSR to accommodate that. SSR is more resource intensive on the server though.
As for the after login part, because it probably shouldn't be crawled by bots anyway, it is okay to do CSR for all the logged in pages. CSR alone doesn't mean you will have a significantly faster initial load though, there is a lot of factor to consider such as the HTML document size, network trip latency, the response time of the other services your own service is depending on, etc. BUT, along with using a service worker and using the app-shell model, CSR should almost always be faster compared to SSR. I would recommend looking into that to improve CSR speed. Link
It depends.
if SEO is irrelevant — e.g. an app that lives behind a login screen — then CSR is fine and you just need something like ReactJS
If you need a good SEO:
a) If you can predict the content to generate it in build time (eg: a blog), then you need SSG (static content created on build time) and should choose something like Gatsby or NextJS
b) If you can’t predict the content/possible request (eg: a search page), the server will need to generate the pages on demand, so you need dynamic SSR (content created on user access time) and should choose something like NextJS.
Note: NextJS allows you to selectively mix in the same project the 3 main rendering forms. For that reason is the best option if you need SEO.
React novice here. We have a situation in which we are going to be creating a sub-domain for every client that signs up for an app and then there will be a landing page for every client at <client_name>.ourwebsite.com.
The front-end for the website is going to be in React using React-Router v2.8, so when the user visits <client_name>.ourwebsite.com, the app needs to pick up the <client_name> and query the server for the data needed for landing page.
I am trying to set this up in the development environment by modifying the /etc/hosts file for every sub-domain name.
How do I get the React app to detect the <client_name> and get the data accordingly?
I hope this is a plain js question. You can get the hostname using window.location.host. This will return you xxx.ourwebsite.com as result in your case. Use this to get your subdoamin name and send it to api.
In my web app, I don't want to use hash-based routing, I don't want to see any # appear in my URLs. I want to use RESTful URLs, e.g., http://www.example.com/blog/id.
react-router can deal with client-side routing quite well, but if a user hit enter on the browser address bar or refresh the page, the request will be sent to the web server and then the web server has to understand the URL and handle the routing.
Isomorphic is a good solution to this situation since it can render any page on both client-side and server-side. Actually there are many react starter kit projects on Github which claim to be isomorphic.
In my opinion, isomorphic looks beautiful but it's too expensive to write code: you need to make you react components render successfully both on client-side and server-side, which needs developers to make great efforts.
So here is my question, can I just make the react-router be isomorphic, not the entire code?
Yes. You can use react-router for a purely front-end (non-ismorphic) app with HTML5 history.
The routing is determined client side, so react-router will spit out the expected page.
However, whilst you don't need to write any server side code, you will need to configure the web server to point your routes to the correct place. This usually means pointing every single request - or every single valid request - to the same HTML file or entry point. Exactly how you do this depends on what you're using to serve your pages - Express, Apache etc.
I hope that makes sense.