Saltar al contenido

Cómo implementar sin servidor del lado del servidor de representación en ReactNov, 14thIn este tutorial, vamos a aprender sobre el lado del servidor de representación en …

marzo 13, 2020

 

En este tutorial, vamos a aprender sobre el lado del servidor de representación en React Aplicaciones Usando marco sin servidor y AWS Lambda.

Nota: Si usted se pegó en cualquier parte de este tutorial, por favor repositorio de código de pago en github.

¿Cuál es el lado del servidor de representación?

del lado del servidor o de representación isomórfica o universal Javascript que significa ejecutar el código JavaScript del cliente y server.In sola página Aplicaciones que se necesita una gran cantidad de tiempo para la carga inicial, porque tenemos que descargar la secuencia de comandos y ejecuta dentro del navegador. En representación del lado de servidor, el cliente recibe el archivo HTML de construcción totalmente de manera que el cliente no hay necesidad de esperar a que las descargas de secuencias de comandos y crea el margen de beneficio.

Usos del lado del servidor de representación

  • Seo
  • Mejorar el rendimiento de la web.
  • rápida interacción.

normal Reaccionar App marcado






React App<itle><br /> </head><br /> <body data-rsssl=1><br /> <noscript><br /> You need to enable JavaScript to run this app.<br /> <<br />oscript></p> <div id="root"></div> <p> </body><br /> </html></code> </p> <h3> Cómo implementar el lado del servidor resultado haciendo uso sin servidor Aws Lambda </h3> <h3> Requisitos </h3> <h3> Paso 1 </h3> <p> primer lugar tenemos que instalar el marco CLI sin servidor. </p> <p> Abra su terminal y ejecutar comandos a continuación. </p> <p> <code>npm install -g serverless</p> <p>sls login // SLS is a shortcut of serverless</code> </p> <h3> Paso 2 </h3> <p> Después sls de inicio de sesión, lo que necesita para configurar sus credenciales Aws con un marco sin servidor. </p> <p> <strong> Obtener Credenciales Aws </strong> </p> <h3> Paso 3 </h3> <h3> crear un nuevo directorio en su PC. </h3> <p> <code>mkdir ssr<br /> cd ssr</code> </p> <h3> Paso 4 </h3> <p> Serverless nos ofrece un tipo diferente de las plantillas, pero estamos usando nodejs como nuestro backend de manera que estamos creando nodejs plantilla. </p> <p> <code>serverless create --template aws-nodejs</code> </p> <p> El comando anterior genera el texto modelo. </p> <p> abrir el directorio de proyecto en el editor de código favorito módulos </p> <h3> para liar, estoy usando Parceljs que es super rápido </h3> <p> <strong> parcel.js config </strong> </p> <p> <code>const Bundler = require("parcel-bundler");<br /> const Path = require("path");</p> <p>// Entrypoint file location<br /> const server = Path.join(__dirname, "app.js");</p> <p>// Bundler options<br /> const serverOpt = {<br /> outDir: "./", // The out directory to put the build files in, defaults to dist<br /> outFile: "handler.js", // The name of the outputFile<br /> publicUrl: "./", // The url to server on, defaults to dist<br /> watch: true,<br /> cacheDir: ".cache", // The directory cache gets put in, defaults to .cache<br /> minify: true, // Minify files, enabled if process.env.NODE_ENV === 'production'<br /> target: "node", // browser<br />ode/electron, defaults to browser<br /> logLevel: 3, // 3 = log everything, 2 = log warnings & errors, 1 = log errors<br /> sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (not supported in minified builds yet)<br /> detailedReport: true // Prints a detailed report of the bundles, assets, filesizes and times, defaults to false, reports are only printed if watch is disabled<br /> };</p> <p>// Entrypoint file location<br /> const browser = Path.join(__dirname, "./src/index.js");</p> <p>// Bundler options<br /> const browserOpt = {<br /> outDir: "./Browser",<br /> outFile: "bundle.js",<br /> publicUrl: "./",<br /> watch: true,<br /> cacheDir: ".cache",<br /> minify: true,<br /> target: "browser",<br /> https: false,<br /> logLevel: 3,<br /> hmrPort: 0,<br /> sourceMaps: true,<br /> hmrHostname: "",<br /> detailedReport: false<br /> };</p> <p>const serverbundler = new Bundler(server, serverOpt);<br /> const bundle = serverbundler.bundle();</p> <p>// Initialises a bundler using the entrypoint location and options provided<br /> const browserbundler = new Bundler(browser, browserOpt);<br /> const bundle1 =browserbundler.bundle();</code> </p> <p> Ahora inicializar el archivo package.json estructura </p> <p> <code>{<br /> "name": "ssr-react",<br /> "version": "1.0.0",<br /> "description": "ssr rendering react using serverless",<br /> "main": "index.js",<br /> "scripts": {<br /> "bundle": "rimraf Browser && node parcel.js",<br /> "start": "sls offline start",<br /> "deploy":"sls deploy"<br /> },<br /> "author": "",<br /> "license": "ISC",<br /> "babel": {<br /> "presets": [<br /> [<br /> "env",<br /> {<br /> "targets": {<br /> "browsers": [<br /> ">1%",<br /> "last 3 versions"<br /> ]<br /> }<br /> }<br /> ],<br /> "stage-2",<br /> "latest",<br /> "react"<br /> ],<br /> "plugins": [<br /> "syntax-dynamic-import",<br /> "transform-class-properties"<br /> ]<br /> },<br /> "devDependencies": {<br /> "babel": "^6.23.0",<br /> "babel-cli": "^6.26.0",<br /> "babel-core": "^6.26.3",<br /> "babel-loader": "^7.1.4",<br /> "babel-plugin-syntax-dynamic-import": "^6.18.0",<br /> "babel-plugin-transform-class-properties": "^6.24.1",<br /> "babel-preset-env": "^1.7.0",<br /> "babel-preset-latest": "^6.24.1",<br /> "babel-preset-react": "^6.24.1",<br /> "babel-preset-stage-2": "^6.24.1",<br /> "parcel-bundler": "^1.8.1",<br /> "rimraf": "^2.6.2",<br /> "serverless-offline": "^3.25.4"<br /> },<br /> "dependencies": {<br /> "body-parser": "^1.18.3",<br /> "cors": "^2.8.4",<br /> "express": "^4.16.3",<br /> "isomorphic-fetch": "^2.2.1",<br /> "react": "^16.4.0",<br /> "react-dom": "^16.4.0",<br /> "react-router-dom": "^4.2.2",<br /> "serverless-http": "^1.5.5"<br /> }<br /> }</code> </p> <h3> carpeta </h3> </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/main-code-structure.png"> <code>import React,{Fragment} from "react";</p> <p>const App = (props) => {<br /> return (<br /> <Fragment></p> <h1>Users</h1> <ul> {props.data.map((user, i) => {<br /> return </p> <li key={i}>{user.name}</li> <p> })} </ul> <p> </Fragment><br /> )<br /> }</p> <p>export default App;</code> <code>import fetch from 'isomorphic-fetch';<br /> function Data() {<br /> return fetch('https://jsonplaceholder.typicode.com/users')<br /> .then(data => data.json())<br /> }<br /> export default Data;</code> </p> <p> Isomorfo traiga nos ayuda a recuperar los datos tanto desde el lado del servidor y el cliente. </p> <p> <code>import React from "react";<br /> import "./app.css";<br /> import { hydrate } from "react-dom";</p> <p>import App from "./Myfirst";<br /> import Data from "./users";</p> <p>Data().then(users => {<br /> hydrate(<App data={users} />, document.getElementById("root"));<br /> });</code> </p> <p> Hidrato: si un marcado ya se generó por el servidor no se regenera de nuevo en el navegador y adjuntar los controladores de eventos requeridos. </p> <h3> index.html </h3> <p> <code><!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <meta http-equiv="X-UA-Compatible" content="ie=edge"><br /> <title>SSR- React<itle> <link rel="stylesheet" href="/bundle.css"> </head><br /> <body data-rsssl=1></p> <div id="root"><!--App--></div> <p><script src="/bundle.js"></script><br /> </body><br /> </html></code> </p> <p> Ahora aquí viene la parte principal hasta ahora hemos creado una sencilla aplicación para reaccionar y HTML plantilla. </p> <p> crear un nuevo archivo llamado app.js en su directorio </p> <p> en primer lugar, tenemos que importar los paquetes requeridos </p> <p> <code>import serverless from "serverless-http";<br /> import express from "express";<br /> import cors from "cors";<br /> import bodyParser from "body-parser";<br /> import React from "react";<br /> import { renderToString } from "react-dom/server";<br /> import App from "./src/App";<br /> import Data from "./src/users";<br /> import fs from "fs";<br /> import path from "path";</code> </p> <p> Ahora tenemos que añadir algunos middleware </p> <p> <code>const app = express();</p> <p>app.use(cors());<br /> app.use(bodyParser.json());<br /> app.use(bodyParser.urlencoded({ extended: false }));<br /> app.use(express.static(path.resolve(__dirname, "./Browser")));</code> <code>const markup = fs.readFileSync(__dirname + "/index.html",<br /> "utf8"<br /> );</p> <p>app.get("**", (req, res) => {<br /> Data().then(users => {<br /> const html = renderToString(<App data={users} />);<br /> res.send(markup.replace("<!--App-->", html));<br /> });<br /> });</p> <p>module.exports.ssr = serverless(app);</code> </p> <p> En el código anterior en primer lugar, que almacena el archivo HTML en la variable de marcado </p> <p> <strong> renderToString: </strong> ayuda a tomar la JSX y da nos devuelve una cadena HTML. </p> <p> Ahora tenemos que Bundle nuestro código y transformar la sintaxis para theseopen su terminal ejecutar y por debajo de comandos. </p> <p> <code>npm run bundle</code> </p> <p> que crea el código incluido con carpeta de archivos Navegador y handler.js </p> <p> <strong> código de cliente que pasa dentro del explorador de carpetas </strong> <strong> app.js código se transforma en el código ES5 y se almacena dentro del archivo handler.js </strong> </p> <p> instalación paso a Serverless.yml </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/folder-structure.png"> </p> <p> final </p> <p> <code>service: ssr</p> <p>provider:<br /> name: aws<br /> runtime: nodejs8.10</p> <p>functions:<br /> app:<br /> handler: handler.ssr<br /> events:<br /> - http: ANY /<br /> - http: 'ANY {proxy+}'</p> <p>plugins:<br /> - serverless-offline</code> </p> <p> <strong> plug-sin servidor fuera de línea nos ayuda a ejecutar el código en el entorno local. manejador </strong> </p> <p> <strong>: </strong> que significa que tenemos que decir en qué archivo se tiene que buscar. </p> <p> Ahora abra su terminal y ejecute </p> <p> <code>npm start</code> </p> <p> que crearán un servidor local </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/users.png"> </p> <p> de cómo implementar el código? </p> <p> <code>sls deploy</code> </p> <p> Una vez que ejecute el comando después de algún tiempo sus puntos finales son visibles en su terminal. </p> <h2> del lado del servidor rendido Reaccionar aplicación. Código </h2> </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/Server-side-rendered-React-app.gif"> </p> <p> Repositorio </p> <div class="banner desktop"> <div class="center fluid"> </div> </div> <div class="banner mobile"> <div class="center fluid"> </div> </div> <footer class="entry-footer"> <section class="entry-related"> <h3>Entradas relacionadas</h3> <div class="flex flex-fluid"> <article id="post-2115" class="entry-item column-third"> <a href="https://openanalytics.es/como-agregar-hojas-de-estilo-externas-a-reactdec-27thin-reaccionar-aplicaciones-que-no-necesitamos-anadir-etiquetas-de-vinculos-manualmente-al-html/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/react-external-style-sheet-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Cómo agregar hojas de estilo externas a reactDec, 27thIn reaccionar aplicaciones que no necesitamos añadir etiquetas de vínculos manualmente al HTML …</h4> </a> </article> <article id="post-2111" class="entry-item column-third"> <a href="https://openanalytics.es/modo-de-empleo-reaccionar-hooksdec-29thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-los-ganchos-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/usestate-hook-demo-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Modo de empleo Reaccionar hooksDec, 29thIn este tutorial, vamos a aprender acerca de cómo utilizar los ganchos en …</h4> </a> </article> <article id="post-2112" class="entry-item column-third"> <a href="https://openanalytics.es/una-guia-para-principiantes-a-la-interfaz-de-usuario-del-material-reaccionar-tutorialdec-4thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-el-material/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/create-react-app-install-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Una guía para principiantes a la interfaz de usuario del material Reaccionar tutorialDec, 4thIn este tutorial, vamos a aprender acerca de cómo utilizar el material …</h4> </a> </article> <article id="post-2090" class="entry-item column-third"> <a href="https://openanalytics.es/componentes-de-orden-superior-especial-en-reaccionar-con-examplesdec-13thin-este-tutorial-vamos-a-aprender-acerca-de-lo-que-son-de-orden-superior/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/hoc-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">componentes de orden superior (Especial) en Reaccionar con examplesDec, 13thIn este tutorial, vamos a aprender acerca de lo que son de orden superior …</h4> </a> </article> <article id="post-2094" class="entry-item column-third"> <a href="https://openanalytics.es/reaccionar-modal-tutorial-utilizando-hookssep-19thin-este-tutorial-vamos-a-aprender-acerca-de-como-crear-un-referente-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/modal-open-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Reaccionar modal tutorial utilizando hooksSep, 19thIn este tutorial, vamos a aprender acerca de cómo crear un referente en …</h4> </a> </article> <article id="post-2096" class="entry-item column-third"> <a href="https://openanalytics.es/http-solicitudes-en-redux-utilizando-redux-thunkjan-11thin-este-tutorial-vamos-a-aprender-acerca-de-como-obtener-los-datos-de-la/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/http-requests-redux-150x150.gif" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Http solicitudes en Redux utilizando Redux-thunkJan, 11thIn este tutorial, vamos a aprender acerca de cómo obtener los datos de la …</h4> </a> </article> </div> </section> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3>Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/como-implementar-sin-servidor-del-lado-del-servidor-de-representacion-en-reactnov-14thin-este-tutorial-vamos-a-aprender-sobre-el-lado-del-servidor-de-representacion-en/#respond" style="display:none;">Cancelar respuesta</a></small></h3> <form action="https://openanalytics.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> Los campos obligatorios están marcados con <span class="required">*</span></p><textarea id="comment" name="comment" cols="45" rows="1" required></textarea><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Publicar comentario" /> <input type='hidden' name='comment_post_ID' value='2044' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div> </footer> </div> </div> </main> <footer class="site-footer"> <div class="container"> <div class="credits row"> <p>SEO y Programación.</p> </div> </div> </footer> <!-- Site Overlay --> <div class="site-overlay"></div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Open Analytics", "alternateName": "SEO y Programación.", "url": "https://openanalytics.es" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "  En este tutorial, vamos a aprender sobre el lado del servidor Read more", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://openanalytics.es/como-implementar-sin-servidor-del-lado-del-servidor-de-representacion-en-reactnov-14thin-este-tutorial-vamos-a-aprender-sobre-el-lado-del-servidor-de-representacion-en/" }, "image": { "@type": "ImageObject", "url": "https://openanalytics.es/wp-content/uploads/2020/03/main-code-structure.png", "height": 1024, "width": 1024 }, "datePublished": "2020-03-13", "dateModified": "2020-03-13", "author": { "@type": "Person", "name": "admin" }, "publisher": { "@type": "Organization", "name": "Open Analytics" } } </script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/navigation.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/social.min.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/main.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/comment-reply.min.js?ver=5.2.7'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/wp-embed.min.js?ver=5.2.7'></script> </body> </html>