How to implement both SSR and CSR in a single React project - reactjs

I am trying to create a react-server side boilerplate using express. How can I configure it so that some pages get generated on the server and send raw HTML to the browser and for some pages, I don't want any SEO and other stuff so just want to send compile javascript code to the browser where browser compiles it and create needed HTML and make API calls.
Is this kind of configuration possible? Can anyone please guide me to the right direction?

Related

Is it possible to save a react Js rendered page to html and / or pdf server side?

This is more of a general question, hence I'm not including any code.
I've looked at quite a few options for both pdf and html, but haven't figured out a good solution.
I'm trying to take the output of what would be rendered by reactJs in a browser and save it to the hosting server instead of (or as well as) displaying it in the browser.
Specifically I'm generating a report using a pretty standard React functions, styled with css, and want to save that report upon rendering to the server.
The API which I also control is Django based.
I've looked at react-pdf/renderer, react-pdf, pdfkit on the Django side (w/wkhtmltopdf), reactdomserver to generate static html files, but can't quite piece together a solution.
Would love some feedback if anyone's done something like this before.

React - fetch some data before ssr and fetch some data on client side

I have an app written in reactjs running on firebase which is completely rendered on client side. The problem is Search engines and SEO.
App's pages are dynamically rendered based on variables in url path.
I am thinking to enable SSR - according to some articles I need to use express server or nextjs server. Also thinking that some data can be loaded from external api before server rendering and some data can be loaded on client side. Is this possible?
Is this good approach? How would you solve this problem without using third party components such as prerender.io?
App was created by using npx create-react-app my-app
Thanks for advices.

Sails Angular Frontend

Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.

Angularjs and Pdfkit - example of saving pdf to downloads

Can any share an example of using Angularjs and Pdfkit to save a file to the client downloads? I've got it rendering in the same window as the app, but need it as a pdf file. I'm assuming this is all done client side rather than the server side with the Pdfkit node module.
This solution can help you https://www.npmjs.com/package/ng-pdfkit, it's a An Angular wrapper for PDFKit.

AngularJS export html to pdf with css

I have a task where I need to export the html to pdf. Where the pdf should have the same design as it has in browser. Basically I need the css should also work in pdf file. Am using angularjs for front end. But I have not found any use full module or any js library which supports my requirement. I also need to update AngularJS scope variables values in pdf. I found one http://pdfmake.org/#/ but it only supports some predefined css attributes. Please provide some suggestion if there is some npm module or any js library which render the html to pdf with css.
Thank you
I am not sure if there is a fully featured JavaScript solution, which can convert HTML/CSS to PDF on client side. It makes sense to take a look to server-side solutions - there are many available.
In an "hybrid" scenario on client side you'd need to populate a HTML/CSS template with variable values, send the resulting HTML/CSS doc to the server side and to receive back a generated PDF.
In the case it is not important anymore, if the converter is written in JavaScript. You may use a standalone native applications, utilize print/PDF output subsystem of WebKit (i.e. PhantomJS) or it can be, for example, a Java module deployed to your application server (i.e. PD4ML).

Resources