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.
Related
I'm working on a project, which has two applications, one is an admin portal where users can customize and create their profile and other one is an application which will preview the profile user creates.
All good with the admin portal, which is developed with CRA - React App. Earlier I was planning creating profile app also with React. Anyhow considering SEO and performance I'm thinking about pre-rendering the profile whenever user changes data.
This will improve the performance by considerable margin and SEO as well. SSR is another good solution, however when there are thousands/millinos of users view single profile, there will be a huge demand for server performance. So that I'm planning to work on a POC, which will create static profile with partial cliend side js functionalities for each user and store it somewhere and serve it through CDN.
I want to know two things here -
To implement this, I'm having lack of knowledge in terms of available solutions. Solutions for storage, cdn.
How can we render static pages during the data changes.
To implement this, I'm having lack of knowledge in terms of available
solutions. Solutions for storage, cdn.
Check Cloudflare CDN. But there are many other proveriders.
How can we render static pages during the data changes.
If you are using pre-rendering, You can rebuild the page assets after a profile page is updated and redeploy them.
If you are using SSR then the server load will be high but no need to redeploy (as the page is rendered at runtime from the origin server always).
I would recommend you use Next.JS support for server rendering and pre-rending instead of implementing them on your own.
I'm planning on building a web app similar to omegle.com using React.
I'm wondering if SSR done using Next.js is the right choice as the app is pretty content light and the most of content is just the user camera. I need good SEO bu I never used Next.js and it might be just additional overhead. I'll be using Twilio API for room creation, chat etc.
So what option should I go for and why?
SSR Using Next.js
CSR using React.js
Make a welcome page using Next and redirect to app.domain.com which uses CSR React.js?
Or do you know something better I should do?
Thanks a lot for help.
It depends really on the scale and type of your application But generally speaking you should go with SSR because of how incredibly fast it is. This means your site gets better indexed by google and other search engines and hence giving you an edge in terms of visibility etc. Refer to this article for more in depth discussion.
For normal functions, I think it is okay to incorporate all pages in to one react app using routes.
But when it comes to admin page, I think it is wise to create a separate react app which will compile into a different .js bundle and serve this not though react route but a totally different html along with the separately created js bundle.
I think if we bundle admin and normal functions into one file and serve through react router, there is a risk where the client can look into the js file and decipher admin pages. Couldn't this be a security risk?
If I'm overthinking please let me know. Other feedbacks are also welcome
Assuming that whatever backend is serving your React application has properly-implemented authentication, it's not technically a security flaw; a malicious actor can't negatively affect your product purely based on the admin page source being bundled with everything else.
That said, it does make it easier to see how your admin tools work, and gives someone nefarious a good indication of where they need to look for exploits.
Personally I'd never serve up a consumer-facing application and admin-facing application in the same codebase. Even though it's not exploitable directly, it makes it easier to find a potential exploit. Security through obscurity is largely a fallacy, but it never hurts.
You can use lazy loading, not to send whole pages in one bundle. but if they are totally different with no functional overlap, it's better to separate them, better responsibility separation, cleaner git history, etc ... And unless you are not exposing valuable data like hard coding api key, reading js source isn't a problem. The security breach happens in the back- servers and the back end services should be using some sort of authentication to respond, check OAuth, OpenID workflow. Its a very common pattern and used by tech giants.
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.