// API callback
related_results_labels_thumbs({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-4603622075690903012"},"updated":{"$t":"2023-10-23T04:18:30.735-07:00"},"category":[{"term":"AWS"},{"term":"AWS Certified Solutions Architect"},{"term":"Architect"},{"term":"Certification"},{"term":"AWS Certified Developer"},{"term":"AWS Certified SysOps Administrator"},{"term":"EC2"},{"term":"Course"},{"term":"Development"},{"term":"Cognito"},{"term":"Tutorial"},{"term":"SysOps Administration"},{"term":"CloudFront"},{"term":"News"},{"term":"S3"},{"term":"AutoScaling"},{"term":"Cordova"},{"term":"DynamoDB"},{"term":"ELB"},{"term":"IAM"},{"term":"Node.JS"},{"term":"PhoneGap"},{"term":"Security"},{"term":"Shared Responsibility"},{"term":"VPC"},{"term":"Amazon Aurora"},{"term":"Android"},{"term":"Denial of Service"},{"term":"EBS"},{"term":"IOS"},{"term":"NodeJS"},{"term":"RDS"},{"term":"AWS IoT"},{"term":"AWS Mobile Hub"},{"term":"Amazon Inspector"},{"term":"Amazon QuickSight"},{"term":"AngularJS"},{"term":"CloudTrail"},{"term":"Cloudformation"},{"term":"Dynamic"},{"term":"ECS"},{"term":"India"},{"term":"Internet of Things"},{"term":"Kinesis Firehose"},{"term":"MEAN"},{"term":"MariaDB"},{"term":"PIOPS"},{"term":"PhantomJS"},{"term":"ReactJS"},{"term":"Region"},{"term":"Route 53"},{"term":"Selenium"},{"term":"Trusted Adviser"},{"term":"WAF"},{"term":"Web Application Firewall"},{"term":"YAML"},{"term":"app"},{"term":"example"}],"title":{"type":"text","$t":"BackSpace Academy Blog"},"subtitle":{"type":"html","$t":"A blog about all things Amazon Web Services (AWS) and Cloud Certification."},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/learn-aws.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/4603622075690903012\/posts\/default\/-\/ReactJS?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"http:\/\/learn-aws.blogspot.com\/search\/label\/ReactJS"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"BackSpace Academy"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/15061292652079774775"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"1"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-4603622075690903012.post-96012945605615497"},"published":{"$t":"2016-10-03T06:10:00.000-07:00"},"updated":{"$t":"2016-10-05T18:44:02.277-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"AngularJS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"AWS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"CloudFront"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Dynamic"},{"scheme":"http://www.blogger.com/atom/ns#","term":"EC2"},{"scheme":"http://www.blogger.com/atom/ns#","term":"MEAN"},{"scheme":"http://www.blogger.com/atom/ns#","term":"NodeJS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ReactJS"}],"title":{"type":"text","$t":"Super Fast Dynamic Websites with CloudFront, ReactJS, and NodeJS - Part 1"},"content":{"type":"html","$t":"\u003Cbr \/\u003E\nCloudFront should be an essential component of any web based application deployment. It not only instantly provides super low-latency performance, it also dramatically reduces server costs while providing maximum server uptime.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCreating low latency static websites with CloudFront is a relatively simple process. You simply upload your site to S3 and create a CloudFront distribution for it. This is great for HTML5 websites and static blogs such as Jeckyl. But what about dynamic sites that need real time information presented to the end user? A different strategy is clearly required. Much has been published about different methods of caching dynamic websites but, I will present the most common sense and reliable technique to achieve this end.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch3\u003E\nServer Side v Browser Side Rendering\u003C\/h3\u003E\nIf you read any book on NodeJS you will no doubt find plenty of examples of rendering Jade templates with Express on the server. If you are still doing this, then you are wasting valuable server resources. A far better option is to render on the browser side. There are a number of frameworks specifically for this, the most popular being Facebook's ReactJS and Google's AngularJS (see \u003Ca href=\"http:\/\/stateofjs.com\/2016\/frontend\/\" target=\"_blank\"\u003EState of JS report\u003C\/a\u003E). I personally use ReactJS and the example will be in ReactJS, but either is fine.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCreating your site using ReactJS or AngularJS and uploading it to your NodeJS public directory will shift the rendering of your site from your server to the client's browser. Users of your app will no longer be waiting for rendered pages and will see pages appear with the click of a button.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nYou can now create a CloudFront distribution for your ReactJS or AngularJS site.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAlthough pages may be rendered instantly in the browser, any dynamic data required for the pages will be cached by CloudFront. We most probably do not want our dynamic data cached. We will still need a solution for delivering this data to the browser.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch3\u003E\nHandling Dynamic Data\u003C\/h3\u003E\n\u003Cbr \/\u003E\nAlthough there are many elaborate techniques published for handling dynamic data with CloudFront, the best way is to deliver this data without caching at all from CloudFront.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNot all HTTP methods are cached by CloudFront, only responses to GET and HEAD requests (although you can also configure CloudFront to cache responses to OPTIONS requests). If we use a different HTTP method, such as POST, PUT or DELETE \u0026nbsp;the request will not be cached by Cloudfront. CloudFront will simply proxy these requests back to our server.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nOur EC2 NodeJS server can now be used to respond to requests for dynamic data by creating an API for our application that responds to POST requests from the client browser.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"https:\/\/2.bp.blogspot.com\/-5Be6dKuaOHQ\/V_JXJqPXlvI\/AAAAAAAAAXA\/xfP1-VLIz9sdkFol9-7ttradYMsWlTCaQCLcB\/s1600\/pptCD4.pptm%2B%255BAutosaved%255D.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"360\" src=\"https:\/\/2.bp.blogspot.com\/-5Be6dKuaOHQ\/V_JXJqPXlvI\/AAAAAAAAAXA\/xfP1-VLIz9sdkFol9-7ttradYMsWlTCaQCLcB\/s640\/pptCD4.pptm%2B%255BAutosaved%255D.png\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\n\u003Cbr \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nSome of you might be wondering why I haven't used serverless technology such as AWS Lambda or API Gateway. Rest assured I will be posting another series using this but, I consider EC2 as the preferred technology for most applications. First of all, costs are rarely mentioned in the serverless discussion. If you have an application that has significant traffic, the conventional EC2\/ELB architecture will be the most cost effective. Secondly, many modern web applications are utilising websocket connections. Connections like this are possible with EC2 directly and also behind an ELB when utilizing proxy protocol. This is not possible with serverless technology as connections are short lived.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nIn the next post in this series we will set up our NodeJS server on EC2, create a CloudFront distribution and, create our API for handling dynamic data.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBe sure to subscribe to the blog so that you can get the latest updates.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nFor more AWS training and tutorials check out\u0026nbsp;\u003Ca href=\"https:\/\/backspace.academy\/\"\u003Ebackspace.academy\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"https:\/\/backspace.academy\/\" target=\"_blank\"\u003E\u003Cimg src=\"https:\/\/backspace.academy\/assets\/img\/logo.svg\" \/\u003E\u003C\/a\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/learn-aws.blogspot.com\/feeds\/96012945605615497\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/learn-aws.blogspot.com\/2016\/10\/super-fast-dynamic-websites-with.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/4603622075690903012\/posts\/default\/96012945605615497"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/4603622075690903012\/posts\/default\/96012945605615497"},{"rel":"alternate","type":"text/html","href":"http:\/\/learn-aws.blogspot.com\/2016\/10\/super-fast-dynamic-websites-with.html","title":"Super Fast Dynamic Websites with CloudFront, ReactJS, and NodeJS - Part 1"}],"author":[{"name":{"$t":"BackSpace Academy"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/15061292652079774775"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-5Be6dKuaOHQ\/V_JXJqPXlvI\/AAAAAAAAAXA\/xfP1-VLIz9sdkFol9-7ttradYMsWlTCaQCLcB\/s72-c\/pptCD4.pptm%2B%255BAutosaved%255D.png","height":"72","width":"72"},"thr$total":{"$t":"0"}}]}});